diff --git a/front-end/.browserslistrc b/front-end/.browserslistrc new file mode 100644 index 0000000..dc3bc09 --- /dev/null +++ b/front-end/.browserslistrc @@ -0,0 +1,4 @@ +> 1% +last 2 versions +not dead +not ie 11 diff --git a/front-end/.editorconfig b/front-end/.editorconfig new file mode 100644 index 0000000..ecea360 --- /dev/null +++ b/front-end/.editorconfig @@ -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 diff --git a/front-end/.gitignore b/front-end/.gitignore new file mode 100644 index 0000000..11f5d71 --- /dev/null +++ b/front-end/.gitignore @@ -0,0 +1,22 @@ +.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/front-end/README.md b/front-end/README.md new file mode 100644 index 0000000..2432d19 --- /dev/null +++ b/front-end/README.md @@ -0,0 +1,81 @@ +# Vuetify (Default) + +This is the official scaffolding tool for Vuetify, designed to give you a head start in building your new Vuetify application. It sets up a base template with all the necessary configurations and standard directory structure, enabling you to begin development without the hassle of setting up the project from scratch. + +## ❗️ Important Links + +- 📄 [Docs](https://vuetifyjs.com/) +- 🚨 [Issues](https://issues.vuetifyjs.com/) +- 🏬 [Store](https://store.vuetifyjs.com/) +- 🎮 [Playground](https://play.vuetifyjs.com/) +- 💬 [Discord](https://community.vuetifyjs.com) + +## 💿 Install + +Set up your project using your preferred package manager. Use the corresponding command to install the dependencies: + +| Package Manager | Command | +|---------------------------------------------------------------|----------------| +| [yarn](https://yarnpkg.com/getting-started) | `yarn install` | +| [npm](https://docs.npmjs.com/cli/v7/commands/npm-install) | `npm install` | +| [pnpm](https://pnpm.io/installation) | `pnpm install` | +| [bun](https://bun.sh/#getting-started) | `bun install` | + +After completing the installation, your environment is ready for Vuetify development. + +## ✨ Features + +- 🖼️ **Optimized Front-End Stack**: Leverage the latest Vue 3 and Vuetify 3 for a modern, reactive UI development experience. [Vue 3](https://v3.vuejs.org/) | [Vuetify 3](https://vuetifyjs.com/en/) +- 🗃️ **State Management**: Integrated with [Pinia](https://pinia.vuejs.org/), the intuitive, modular state management solution for Vue. +- 🚦 **Routing and Layouts**: Utilizes Vue Router for SPA navigation and vite-plugin-vue-layouts-next for organizing Vue file layouts. [Vue Router](https://router.vuejs.org/) | [vite-plugin-vue-layouts-next](https://github.com/loicduong/vite-plugin-vue-layouts-next) +- 💻 **Enhanced Development Experience**: Benefit from TypeScript's static type checking and the ESLint plugin suite for Vue, ensuring code quality and consistency. [TypeScript](https://www.typescriptlang.org/) | [ESLint Plugin Vue](https://eslint.vuejs.org/) +- ⚡ **Next-Gen Tooling**: Powered by Vite, experience fast cold starts and instant HMR (Hot Module Replacement). [Vite](https://vitejs.dev/) +- 🧩 **Automated Component Importing**: Streamline your workflow with unplugin-vue-components, automatically importing components as you use them. [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) +- 🛠️ **Strongly-Typed Vue**: Use vue-tsc for type-checking your Vue components, and enjoy a robust development experience. [vue-tsc](https://github.com/johnsoncodehk/volar/tree/master/packages/vue-tsc) + +These features are curated to provide a seamless development experience from setup to deployment, ensuring that your Vuetify application is both powerful and maintainable. + +## 💡 Usage + +This section covers how to start the development server and build your project for production. + +### Starting the Development Server + +To start the development server with hot-reload, run the following command. The server will be accessible at [http://localhost:3000](http://localhost:3000): + +```bash +yarn dev +``` + +(Repeat for npm, pnpm, and bun with respective commands.) + +> Add NODE_OPTIONS='--no-warnings' to suppress the JSON import warnings that happen as part of the Vuetify import mapping. If you are on Node [v21.3.0](https://nodejs.org/en/blog/release/v21.3.0) or higher, you can change this to NODE_OPTIONS='--disable-warning=5401'. If you don't mind the warning, you can remove this from your package.json dev script. + +### Building for Production + +To build your project for production, use: + +```bash +yarn build +``` + +(Repeat for npm, pnpm, and bun with respective commands.) + +Once the build process is completed, your application will be ready for deployment in a production environment. + +## 💪 Support Vuetify Development + +This project is built with [Vuetify](https://vuetifyjs.com/en/), a UI Library with a comprehensive collection of Vue components. Vuetify is an MIT licensed Open Source project that has been made possible due to the generous contributions by our [sponsors and backers](https://vuetifyjs.com/introduction/sponsors-and-backers/). If you are interested in supporting this project, please consider: + +- [Requesting Enterprise Support](https://support.vuetifyjs.com/) +- [Sponsoring John on Github](https://github.com/users/johnleider/sponsorship) +- [Sponsoring Kael on Github](https://github.com/users/kaelwd/sponsorship) +- [Supporting the team on Open Collective](https://opencollective.com/vuetify) +- [Becoming a sponsor on Patreon](https://www.patreon.com/vuetify) +- [Becoming a subscriber on Tidelift](https://tidelift.com/subscription/npm/vuetify) +- [Making a one-time donation with Paypal](https://paypal.me/vuetify) + +## 📑 License +[MIT](http://opensource.org/licenses/MIT) + +Copyright (c) 2016-present Vuetify, LLC diff --git a/front-end/env.d.ts b/front-end/env.d.ts new file mode 100644 index 0000000..dabd0de --- /dev/null +++ b/front-end/env.d.ts @@ -0,0 +1,2 @@ +/// +/// diff --git a/front-end/eslint.config.js b/front-end/eslint.config.js new file mode 100644 index 0000000..8697a11 --- /dev/null +++ b/front-end/eslint.config.js @@ -0,0 +1 @@ +export { default } from 'eslint-config-vuetify/index.ts.mjs' diff --git a/front-end/index.html b/front-end/index.html new file mode 100644 index 0000000..8abc79c --- /dev/null +++ b/front-end/index.html @@ -0,0 +1,13 @@ + + + + + + + Welcome to Vuetify 3 + + +
+ + + diff --git a/front-end/package.json b/front-end/package.json new file mode 100644 index 0000000..d0f9985 --- /dev/null +++ b/front-end/package.json @@ -0,0 +1,38 @@ +{ + "name": "front-end", + "private": true, + "type": "module", + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "run-p type-check \"build-only {@}\" --", + "preview": "vite preview", + "build-only": "vite build", + "type-check": "vue-tsc --build --force", + "lint": "eslint . --fix" + }, + "dependencies": { + "@fontsource/roboto": "5.2.5", + "@mdi/font": "7.4.47", + "vue": "^3.5.13", + "vuetify": "^3.8.1" + }, + "devDependencies": { + "@tsconfig/node22": "^22.0.0", + "@types/node": "^22.9.0", + "@vitejs/plugin-vue": "^5.2.3", + "@vue/tsconfig": "^0.7.0", + "eslint": "^9.23.0", + "eslint-config-vuetify": "^3.0.3", + "npm-run-all2": "^7.0.2", + "sass-embedded": "^1.86.3", + "typescript": "~5.8.2", + "unplugin-fonts": "^1.3.1", + "unplugin-vue-components": "^28.4.1", + "unplugin-vue-router": "^0.12.0", + "vite": "^6.2.2", + "vite-plugin-vuetify": "^2.1.1", + "vue-router": "^4.5.0", + "vue-tsc": "^2.2.8" + } +} diff --git a/front-end/public/favicon.ico b/front-end/public/favicon.ico new file mode 100644 index 0000000..8fb9f91 Binary files /dev/null and b/front-end/public/favicon.ico differ diff --git a/front-end/src/App.vue b/front-end/src/App.vue new file mode 100644 index 0000000..6ceb9da --- /dev/null +++ b/front-end/src/App.vue @@ -0,0 +1,11 @@ + + + diff --git a/front-end/src/assets/logo.png b/front-end/src/assets/logo.png new file mode 100644 index 0000000..a5f23ae Binary files /dev/null and b/front-end/src/assets/logo.png differ diff --git a/front-end/src/assets/logo.svg b/front-end/src/assets/logo.svg new file mode 100644 index 0000000..d57771c --- /dev/null +++ b/front-end/src/assets/logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/front-end/src/components/HelloWorld.vue b/front-end/src/components/HelloWorld.vue new file mode 100644 index 0000000..554c0eb --- /dev/null +++ b/front-end/src/components/HelloWorld.vue @@ -0,0 +1,90 @@ + + + diff --git a/front-end/src/components/README.md b/front-end/src/components/README.md new file mode 100644 index 0000000..d1dc92f --- /dev/null +++ b/front-end/src/components/README.md @@ -0,0 +1,35 @@ +# Components + +Vue template files in this folder are automatically imported. + +## 🚀 Usage + +Importing is handled by [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components). This plugin automatically imports `.vue` files created in the `src/components` directory, and registers them as global components. This means that you can use any component in your application without having to manually import it. + +The following example assumes a component located at `src/components/MyComponent.vue`: + +```vue + + + +``` + +When your template is rendered, the component's import will automatically be inlined, which renders to this: + +```vue + + + +``` diff --git a/front-end/src/main.ts b/front-end/src/main.ts new file mode 100644 index 0000000..b62acc8 --- /dev/null +++ b/front-end/src/main.ts @@ -0,0 +1,23 @@ +/** + * main.ts + * + * Bootstraps Vuetify and other plugins then mounts the App` + */ + +// Plugins +import { registerPlugins } from '@/plugins' + +// Components +import App from './App.vue' + +// Composables +import { createApp } from 'vue' + +// Styles +import 'unfonts.css' + +const app = createApp(App) + +registerPlugins(app) + +app.mount('#app') diff --git a/front-end/src/pages/README.md b/front-end/src/pages/README.md new file mode 100644 index 0000000..341536c --- /dev/null +++ b/front-end/src/pages/README.md @@ -0,0 +1,5 @@ +# Pages + +Vue components created in this folder will automatically be converted to navigatable routes. + +Full documentation for this feature can be found in the Official [unplugin-vue-router](https://github.com/posva/unplugin-vue-router) repository. diff --git a/front-end/src/pages/index.vue b/front-end/src/pages/index.vue new file mode 100644 index 0000000..dac59c7 --- /dev/null +++ b/front-end/src/pages/index.vue @@ -0,0 +1,7 @@ + + + diff --git a/front-end/src/plugins/README.md b/front-end/src/plugins/README.md new file mode 100644 index 0000000..62201c7 --- /dev/null +++ b/front-end/src/plugins/README.md @@ -0,0 +1,3 @@ +# Plugins + +Plugins are a way to extend the functionality of your Vue application. Use this folder for registering plugins that you want to use globally. diff --git a/front-end/src/plugins/index.ts b/front-end/src/plugins/index.ts new file mode 100644 index 0000000..d3c748a --- /dev/null +++ b/front-end/src/plugins/index.ts @@ -0,0 +1,18 @@ +/** + * plugins/index.ts + * + * Automatically included in `./src/main.ts` + */ + +// Plugins +import vuetify from './vuetify' +import router from '../router' + +// Types +import type { App } from 'vue' + +export function registerPlugins (app: App) { + app + .use(vuetify) + .use(router) +} diff --git a/front-end/src/plugins/vuetify.ts b/front-end/src/plugins/vuetify.ts new file mode 100644 index 0000000..7652788 --- /dev/null +++ b/front-end/src/plugins/vuetify.ts @@ -0,0 +1,19 @@ +/** + * 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: { + defaultTheme: 'dark', + }, +}) diff --git a/front-end/src/router/index.ts b/front-end/src/router/index.ts new file mode 100644 index 0000000..aeab4c3 --- /dev/null +++ b/front-end/src/router/index.ts @@ -0,0 +1,35 @@ +/** + * router/index.ts + * + * Automatic routes for `./src/pages/*.vue` + */ + +// Composables +import { createRouter, createWebHistory } from 'vue-router/auto' +import { routes } from 'vue-router/auto-routes' + +const router = createRouter({ + history: createWebHistory(import.meta.env.BASE_URL), + routes, +}) + +// Workaround for https://github.com/vitejs/vite/issues/11804 +router.onError((err, to) => { + if (err?.message?.includes?.('Failed to fetch dynamically imported module')) { + if (!localStorage.getItem('vuetify:dynamic-reload')) { + console.log('Reloading page to fix dynamic import error') + localStorage.setItem('vuetify:dynamic-reload', 'true') + location.assign(to.fullPath) + } else { + console.error('Dynamic import error, reloading page did not fix it', err) + } + } else { + console.error(err) + } +}) + +router.isReady().then(() => { + localStorage.removeItem('vuetify:dynamic-reload') +}) + +export default router diff --git a/front-end/src/styles/README.md b/front-end/src/styles/README.md new file mode 100644 index 0000000..ea86179 --- /dev/null +++ b/front-end/src/styles/README.md @@ -0,0 +1,3 @@ +# Styles + +This directory is for configuring the styles of the application. diff --git a/front-end/src/styles/settings.scss b/front-end/src/styles/settings.scss new file mode 100644 index 0000000..3e36a27 --- /dev/null +++ b/front-end/src/styles/settings.scss @@ -0,0 +1,10 @@ +/** + * src/styles/settings.scss + * + * Configures SASS variables and Vuetify overwrites + */ + +// https://vuetifyjs.com/features/sass-variables/` +// @use 'vuetify/settings' with ( +// $color-pack: false +// ); diff --git a/front-end/tsconfig.app.json b/front-end/tsconfig.app.json new file mode 100644 index 0000000..e14c754 --- /dev/null +++ b/front-end/tsconfig.app.json @@ -0,0 +1,14 @@ +{ + "extends": "@vue/tsconfig/tsconfig.dom.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", + + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/front-end/tsconfig.json b/front-end/tsconfig.json new file mode 100644 index 0000000..66b5e57 --- /dev/null +++ b/front-end/tsconfig.json @@ -0,0 +1,11 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.node.json" + }, + { + "path": "./tsconfig.app.json" + } + ] +} diff --git a/front-end/tsconfig.node.json b/front-end/tsconfig.node.json new file mode 100644 index 0000000..5a0c6a5 --- /dev/null +++ b/front-end/tsconfig.node.json @@ -0,0 +1,19 @@ +{ + "extends": "@tsconfig/node22/tsconfig.json", + "include": [ + "vite.config.*", + "vitest.config.*", + "cypress.config.*", + "nightwatch.conf.*", + "playwright.config.*" + ], + "compilerOptions": { + "composite": true, + "noEmit": true, + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", + + "module": "ESNext", + "moduleResolution": "Bundler", + "types": ["node"] + } +} diff --git a/front-end/vite.config.mts b/front-end/vite.config.mts new file mode 100644 index 0000000..743d8c2 --- /dev/null +++ b/front-end/vite.config.mts @@ -0,0 +1,80 @@ +// Plugins +import Components from 'unplugin-vue-components/vite' +import Vue from '@vitejs/plugin-vue' +import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify' +import Fonts from 'unplugin-fonts/vite' +import VueRouter from 'unplugin-vue-router/vite' + +// Utilities +import { defineConfig } from 'vite' +import { fileURLToPath, URL } from 'node:url' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + VueRouter({ + dts: 'src/typed-router.d.ts', + }), + Vue({ + template: { transformAssetUrls }, + }), + // https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme + Vuetify({ + autoImport: true, + styles: { + configFile: 'src/styles/settings.scss', + }, + }), + Components({ + dts: 'src/components.d.ts', + }), + Fonts({ + fontsource: { + families: [ + { + name: "Roboto", + weights: [100, 300, 400, 500, 700, 900], + styles: ["normal", "italic"], + }, + ], + }, + }), + ], + optimizeDeps: { + exclude: [ + 'vuetify', + 'vue-router', + 'unplugin-vue-router/runtime', + 'unplugin-vue-router/data-loaders', + 'unplugin-vue-router/data-loaders/basic', + ], + }, + define: { 'process.env': {} }, + resolve: { + alias: { + '@': fileURLToPath(new URL('./src', import.meta.url)), + }, + extensions: [ + '.js', + '.json', + '.jsx', + '.mjs', + '.ts', + '.tsx', + '.vue', + ], + }, + server: { + port: 3000, + }, + css: { + preprocessorOptions: { + sass: { + api: 'modern-compiler', + }, + scss: { + api: 'modern-compiler', + }, + }, + }, +})