ridzimeko/vue-tailwind-myna
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

setup project

Browse Source
This commit is contained in:
Amro Alfien 2024-11-20 15:23:32 +07:00
commit 7a800d0b83
21 changed files with 3582 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.editorconfig Normal file
View File

@ -0,0 +1,6 @@
[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}]
charset = utf-8
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

30
.gitignore vendored Normal file
View File

@ -0,0 +1,30 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
.DS_Store
dist
dist-ssr
coverage
*.local
/cypress/videos/
/cypress/screenshots/
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
*.tsbuildinfo

7
.prettierrc.json Normal file
View File

@ -0,0 +1,7 @@
{
"$schema": "https://json.schemastore.org/prettierrc",
"semi": false,
"singleQuote": true,
"printWidth": 100
}

8
.vscode/extensions.json vendored Normal file
View File

@ -0,0 +1,8 @@
{
"recommendations": [
"Vue.volar",
"dbaeumer.vscode-eslint",
"EditorConfig.EditorConfig",
"esbenp.prettier-vscode"
]
}

35
README.md Normal file
View File

@ -0,0 +1,35 @@
# Vue + Tailwind + MynaUI (unplugin-icons)
This template should help get you started developing with Vue 3 + Tailwind CSS + MynaUI Icon with unplugin-icons component in Vite.
## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
## Customize configuration
See [Vite Configuration Reference](https://vite.dev/config/).
## Project Setup
```sh
pnpm install
```
### Compile and Hot-Reload for Development
```sh
pnpm dev
```
### Compile and Minify for Production
```sh
pnpm build
```
### Lint with [ESLint](https://eslint.org/)
```sh
pnpm lint
```

19
eslint.config.js Normal file
View File

@ -0,0 +1,19 @@
import js from '@eslint/js'
import pluginVue from 'eslint-plugin-vue'
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
export default [
{
name: 'app/files-to-lint',
files: ['**/*.{js,mjs,jsx,vue}'],
},
{
name: 'app/files-to-ignore',
ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
},
js.configs.recommended,
...pluginVue.configs['flat/essential'],
skipFormatting,
]

13
index.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

10
jsconfig.json Normal file
View File

@ -0,0 +1,10 @@
{
"compilerOptions": {
"types": ["unplugin-icons/types/vue"],
"paths": {
"@/*": ["./src/*"],
"@mynaIcon/*": ["./node_modules/@mynaui/icons/*"]
}
},
"exclude": ["node_modules", "dist"]
}

33
package.json Normal file
View File

@ -0,0 +1,33 @@
{
"name": "vue-tailwind-myna",
"version": "0.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"lint": "eslint . --fix",
"format": "prettier --write src/"
},
"dependencies": {
"vue": "^3.5.12",
"vue-router": "^4.4.5"
},
"devDependencies": {
"@eslint/js": "^9.14.0",
"@iconify-json/mynaui": "^1.2.7",
"@vitejs/plugin-vue": "^5.1.4",
"@vue/compiler-sfc": "^3.5.13",
"@vue/eslint-config-prettier": "^10.1.0",
"autoprefixer": "^10.4.20",
"eslint": "^9.14.0",
"eslint-plugin-vue": "^9.30.0",
"postcss": "^8.4.49",
"prettier": "^3.3.3",
"tailwindcss": "^3.4.15",
"unplugin-icons": "^0.20.1",
"vite": "^5.4.10",
"vite-plugin-vue-devtools": "^7.5.4"
}
}

3308
pnpm-lock.yaml Normal file
View File

File diff suppressed because it is too large Load Diff

6
postcss.config.js Normal file
View File

@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

13
src/App.vue Normal file
View File

@ -0,0 +1,13 @@
<script setup>
import { RouterView } from 'vue-router'
import TheWelcome from './components/TheWelcome.vue'
</script>
<template>
<div class="bg-neutral-900 h-screen w-screen text-white content-center text-center">
<div class="grid grid-cols-2">
<TheWelcome />
<RouterView />
</div>
</div>
</template>

3
src/assets/index.css Normal file
View File

@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

20
src/components/TheWelcome.vue Normal file
View File

@ -0,0 +1,20 @@
<script setup>
import { RouterLink } from 'vue-router'
import MynauiMyna from '~icons/mynaui/myna'
</script>
<template>
<header>
<div>
<div class="flex gap-4 items-center justify-center">
<h1 class="text-4xl">Vue + Tailwind + MynaUI</h1>
<mynaui-myna class="size-12" />
</div>
<nav class="flex gap-4 text-2xl justify-center my-4">
<RouterLink class="hover:underline text-green-400" to="/">Home</RouterLink>
<RouterLink class="hover:underline text-green-400" to="/about">About</RouterLink>
</nav>
</div>
</header>
</template>

11
src/main.js Normal file
View File

@ -0,0 +1,11 @@
import './assets/index.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')

23
src/router/index.js Normal file
View File

@ -0,0 +1,23 @@
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView,
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (About.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import('../views/AboutView.vue'),
},
],
})
export default router

5
src/views/AboutView.vue Normal file
View File

@ -0,0 +1,5 @@
<template>
<div>
<h1>This is an about page</h1>
</div>
</template>

7
src/views/HomeView.vue Normal file
View File

@ -0,0 +1,7 @@
<script setup></script>
<template>
<div>
<h1>This is your homepage</h1>
</div>
</template>

8
tailwind.config.js Normal file
View File

@ -0,0 +1,8 @@
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [],
}

17
vite.config.js Normal file
View File

@ -0,0 +1,17 @@
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import Icons from 'unplugin-icons/vite'
// https://vite.dev/config/
export default defineConfig({
plugins: [vue(), vueDevTools(), Icons({ compiler: 'vue3' })],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
'@mynaIcon': fileURLToPath(new URL('./node_modules/@mynaui/icons', import.meta.url)),
},
},
})