Vuetify 3

commit af28f86f3e10404d3a763e7bca5807691e7c9c19 Author: Maciej Pędzich Date: Tue May 23 08:19:09 2023 +0200 Init Vuetify project diff --git a/.browserslistrc b/.browserslistrc new file mode 100644 index 0000000..dc3bc09 --- /dev/null +++ b/.browserslistrc @@ -0,0 +1,4 @@ +> 1% +last 2 versions +not dead +not ie 11 diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..7053c49 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,5 @@ +[*.{js,jsx,ts,tsx,vue}] +indent_style = space +indent_size = 2 +trim_trailing_whitespace = true +insert_final_newline = true diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..5f3949b --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,14 @@ +module.exports = { + root: true, + env: { + node: true, + }, + extends: [ + 'plugin:vue/vue3-essential', + 'eslint:recommended', + '@vue/eslint-config-typescript', + ], + rules: { + 'vue/multi-word-component-names': 'off', + }, +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..403adbc --- /dev/null +++ b/.gitignore @@ -0,0 +1,23 @@ +.DS_Store +node_modules +/dist + + +# local env files +.env.local +.env.*.local + +# Log files +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* + +# Editor directories and files +.idea +.vscode +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/README.md b/README.md new file mode 100644 index 0000000..50b30e0 --- /dev/null +++ b/README.md @@ -0,0 +1,44 @@ +# default + +## Project setup + +``` +# yarn +yarn + +# npm +npm install + +# pnpm +pnpm install +``` + +### Compiles and hot-reloads for development + +``` +# yarn +yarn dev + +# npm +npm run dev + +# pnpm +pnpm dev +``` + +### Compiles and minifies for production + +``` +# yarn +yarn build + +# npm +npm run build + +# pnpm +pnpm build +``` + +### Customize configuration + +See [Configuration Reference](https://vitejs.dev/config/). diff --git a/index.html b/index.html new file mode 100644 index 0000000..e448c23 --- /dev/null +++ b/index.html @@ -0,0 +1,16 @@ + + + + + + + + Vuetify 3 + + + +

+ + + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..e443e7e --- /dev/null +++ b/package.json @@ -0,0 +1,31 @@ +{ + "name": "racemash", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vue-tsc --noEmit && vite build", + "preview": "vite preview", + "lint": "eslint . --fix --ignore-path .gitignore" + }, + "dependencies": { + "@mdi/font": "7.0.96", + "roboto-fontface": "*", + "vue": "^3.2.0", + "vue-router": "^4.0.0", + "vuetify": "^3.0.0", + "webfontloader": "^1.0.0" + }, + "devDependencies": { + "@babel/types": "^7.21.4", + "@types/node": "^18.15.0", + "@types/webfontloader": "^1.6.35", + "@vitejs/plugin-vue": "^3.2.0", + "@vue/eslint-config-typescript": "^11.0.0", + "eslint": "^8.0.0", + "eslint-plugin-vue": "^9.0.0", + "typescript": "^5.0.0", + "vite": "^4.2.0", + "vite-plugin-vuetify": "^1.0.0", + "vue-tsc": "^1.2.0" + } +} diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..8fb9f91 Binary files /dev/null and b/public/favicon.ico differ diff --git a/src/App.vue b/src/App.vue new file mode 100644 index 0000000..8f46f32 --- /dev/null +++ b/src/App.vue @@ -0,0 +1,11 @@ + + + diff --git a/src/assets/logo.png b/src/assets/logo.png new file mode 100644 index 0000000..a5f23ae Binary files /dev/null and b/src/assets/logo.png differ diff --git a/src/assets/logo.svg b/src/assets/logo.svg new file mode 100644 index 0000000..d57771c --- /dev/null +++ b/src/assets/logo.svg @@ -0,0 +1,6 @@ + diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue new file mode 100644 index 0000000..646a508 --- /dev/null +++ b/src/components/HelloWorld.vue @@ -0,0 +1,75 @@ + + + diff --git a/src/layouts/default/Default.vue b/src/layouts/default/Default.vue new file mode 100644 index 0000000..57ada2f --- /dev/null +++ b/src/layouts/default/Default.vue @@ -0,0 +1,9 @@ + + + diff --git a/src/layouts/default/View.vue b/src/layouts/default/View.vue new file mode 100644 index 0000000..8e9e414 --- /dev/null +++ b/src/layouts/default/View.vue @@ -0,0 +1,9 @@ + + + diff --git a/src/main.ts b/src/main.ts new file mode 100644 index 0000000..f11674d --- /dev/null +++ b/src/main.ts @@ -0,0 +1,20 @@ +/** + * main.ts + * + * Bootstraps Vuetify and other plugins then mounts the App` + */ + +// Components +import App from './App.vue' + +// Composables +import { createApp } from 'vue' + +// Plugins +import { registerPlugins } from '@/plugins' + +const app = createApp(App) + +registerPlugins(app) + +app.mount('#app') diff --git a/src/plugins/index.ts b/src/plugins/index.ts new file mode 100644 index 0000000..a26ebe7 --- /dev/null +++ b/src/plugins/index.ts @@ -0,0 +1,20 @@ +/** + * plugins/index.ts + * + * Automatically included in `./src/main.ts` + */ + +// Plugins +import { loadFonts } from './webfontloader' +import vuetify from './vuetify' +import router from '../router' + +// Types +import type { App } from 'vue' + +export function registerPlugins (app: App) { + loadFonts() + app + .use(vuetify) + .use(router) +} diff --git a/src/plugins/vuetify.ts b/src/plugins/vuetify.ts new file mode 100644 index 0000000..c276519 --- /dev/null +++ b/src/plugins/vuetify.ts @@ -0,0 +1,26 @@ +/** + * plugins/vuetify.ts + * + * Framework documentation: https://vuetifyjs.com` + */ + +// Styles +import '@mdi/font/css/materialdesignicons.css' +import 'vuetify/styles' + +// Composables +import { createVuetify } from 'vuetify' + +// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides +export default createVuetify({ + theme: { + themes: { + light: { + colors: { + primary: '#1867C0', + secondary: '#5CBBF6', + }, + }, + }, + }, +}) diff --git a/src/plugins/webfontloader.ts b/src/plugins/webfontloader.ts new file mode 100644 index 0000000..0cf5614 --- /dev/null +++ b/src/plugins/webfontloader.ts @@ -0,0 +1,15 @@ +/** + * plugins/webfontloader.ts + * + * webfontloader documentation: https://github.com/typekit/webfontloader + */ + + export async function loadFonts () { + const webFontLoader = await import(/* webpackChunkName: "webfontloader" */'webfontloader') + + webFontLoader.load({ + google: { + families: ['Roboto:100,300,400,500,700,900&display=swap'], + }, + }) +} diff --git a/src/router/index.ts b/src/router/index.ts new file mode 100644 index 0000000..65353da --- /dev/null +++ b/src/router/index.ts @@ -0,0 +1,26 @@ +// Composables +import { createRouter, createWebHistory } from 'vue-router' + +const routes = [ + { + path: '/', + component: () => import('@/layouts/default/Default.vue'), + children: [ + { + path: '', + name: 'Home', + // 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(/* webpackChunkName: "home" */ '@/views/Home.vue'), + }, + ], + }, +] + +const router = createRouter({ + history: createWebHistory(process.env.BASE_URL), + routes, +}) + +export default router diff --git a/src/views/Home.vue b/src/views/Home.vue new file mode 100644 index 0000000..7646ab7 --- /dev/null +++ b/src/views/Home.vue @@ -0,0 +1,7 @@ + + + diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts new file mode 100644 index 0000000..323c78a --- /dev/null +++ b/src/vite-env.d.ts @@ -0,0 +1,7 @@ +/// + +declare module '*.vue' { + import type { DefineComponent } from 'vue' + const component: DefineComponent<{}, {}, any> + export default component +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..aa6f0fd --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "target": "ESNext", + "useDefineForClassFields": true, + "module": "ESNext", + "moduleResolution": "Node", + "strict": true, + "jsx": "preserve", + "resolveJsonModule": true, + "isolatedModules": true, + "esModuleInterop": true, + "lib": ["ESNext", "DOM"], + "skipLibCheck": true, + "noEmit": true, + "paths": { + "@/*": [ + "src/*" + ] + } + }, + "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], + "references": [{ "path": "./tsconfig.node.json" }], + "exclude": ["node_modules"] +} diff --git a/tsconfig.node.json b/tsconfig.node.json new file mode 100644 index 0000000..9d31e2a --- /dev/null +++ b/tsconfig.node.json @@ -0,0 +1,9 @@ +{ + "compilerOptions": { + "composite": true, + "module": "ESNext", + "moduleResolution": "Node", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..17bac02 --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,38 @@ +// Plugins +import vue from '@vitejs/plugin-vue' +import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify' + +// Utilities +import { defineConfig } from 'vite' +import { fileURLToPath, URL } from 'node:url' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue({ + template: { transformAssetUrls } + }), + // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin + vuetify({ + autoImport: true, + }), + ], + define: { 'process.env': {} }, + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)) + }, + extensions: [ + '.js', + '.json', + '.jsx', + '.mjs', + '.ts', + '.tsx', + '.vue', + ], + }, + server: { + port: 3000, + }, +})