Vue Vite

.eslintrs.cjs

require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
    root: true,
    extends: [
        'plugin:vue/vue3-essential',
        'eslint:recommended',
        '@vue/eslint-config-typescript',
        'plugin:prettier/recommended',
        '@vue/eslint-config-prettier',
        './.eslintrc-auto-import.json',
    ],
    parserOptions: {
        ecmaVersion: 'latest',
    },
    rules: {
        '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
        'vue/multi-word-component-names': ['off'],
    },
};

.prettierrc.json

{
    "printWidth": 120,
    "arrowParens": "avoid",
    "singleQuote": true,
    "semi": true,
    "tabWidth": 4,
    "useTabs": false,
    "endOfLine": "auto"
}

package.json

{
  "name": "coursedesk-frontend",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "vite --host 0.0.0.0",
    "build": "run-p type-check build-only",
    "preview": "vite preview",
    "test:unit": "vitest --environment jsdom --root src/",
    "build-only": "vite build",
    "stage": "vite build --mode staging",
    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
  },
  "dependencies": {
    "@sentry/tracing": "^7.37.2",
    "@sentry/vue": "^7.37.2",
    "@vee-validate/zod": "^4.7.4",
    "@vueuse/components": "^9.13.0",
    "@vueuse/core": "^9.13.0",
    "axios": "^1.3.2",
    "bootstrap-icons-vue": "^1.10.3",
    "crypto-js": "^4.1.1",
    "dayjs": "^1.11.7",
    "decimal.js": "^10.4.3",
    "dompurify": "^3.0.2",
    "floating-vue": "^2.0.0-beta.20",
    "jwt-decode": "^3.1.2",
    "laravel-echo": "^1.15.0",
    "lodash": "^4.17.21",
    "pinia": "^2.0.28",
    "pinia-plugin-persistedstate": "^3.0.2",
    "pusher-js": "^8.0.1",
    "tus-js-client": "^3.1.0",
    "type-fest": "^3.11.1",
    "uuid": "^9.0.0",
    "vee-validate": "^4.7.4",
    "vue": "3.3",
    "vue-router": "^4.1.6",
    "zod": "^3.20.6"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.1.4",
    "@types/jsdom": "^20.0.1",
    "@types/lodash": "^4.14.191",
    "@types/node": "^18.11.12",
    "@vitejs/plugin-vue": "^4.2.0",
    "@vitejs/plugin-vue-jsx": "^3.0.0",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^11.0.0",
    "@vue/test-utils": "^2.2.6",
    "@vue/tsconfig": "^0.1.3",
    "eslint": "^8.22.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-vue": "^9.3.0",
    "jsdom": "^20.0.3",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.4.21",
    "prettier": "^2.7.1",
    "tailwindcss": "^3.3.1",
    "typescript": "^5.0.2",
    "unplugin-auto-import": "^0.14.3",
    "unplugin-vue-components": "^0.24.0",
    "unplugin-vue-router": "^0.5.0",
    "vite": "^4.3.5",
    "vite-plugin-mkcert": "^1.15.0",
    "vite-plugin-vue-layouts": "^0.8.0",
    "vitest": "^0.25.8",
    "vue-tsc": "^1.6.4",
    "@types/crypto-js": "^4.1.1",
    "@types/dompurify": "^3.0.2",
    "@types/uuid": "^9.0.0",
  }
}

tsconfig.app.json

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": [
    "dts/**/*.d.ts",
    "src/**/*",
    "src/**/*.vue"
  ],
  "exclude": [
    "src/**/__tests__/*"
  ],
  "compilerOptions": {
    "composite": true,
    "lib": [
      "ES2017",
      "DOM"
    ],
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    },
    "types": [
      "vite-plugin-vue-layouts/client",
      "vitest/importMeta"
    ]
  }
}

tsconfig.config.json

{
  "extends": "@vue/tsconfig/tsconfig.node.json",
  "include": [
    "vite.config.*",
    "vitest.config.*",
    "cypress.config.*",
    "playwright.config.*"
  ],
  "compilerOptions": {
    "composite": true,
    "types": [
      "node"
    ]
  }
}

tsconfig.json

{
  "files": [],
  "compilerOptions": {
    "ignoreDeprecations": "5.0",
    "types": [
      "vitest/importMeta"
    ]
  },
  "references": [
    {
      "path": "./tsconfig.config.json"
    },
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.vitest.json"
    }
  ]
}

tsconfig.vitest.json

{
  "extends": "./tsconfig.app.json",
  "exclude": [],
  "compilerOptions": {
    "composite": true,
    "lib": [],
    "types": [
      "node",
      "jsdom"
    ]
  }
}

vite.config.ts

/// <reference types="vitest" />
/// <reference types="vitest/globals" />
import { fileURLToPath, URL } from 'node:url';
import { readFileSync, existsSync } from 'node:fs';

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import VueRouter from 'unplugin-vue-router/vite';
import AutoImport from 'unplugin-auto-import/vite';
import { VueRouterAutoImports } from 'unplugin-vue-router';
import Components from 'unplugin-vue-components/vite';
import Layouts from 'vite-plugin-vue-layouts';
import mkcert from 'vite-plugin-mkcert';

// https://vitejs.dev/config/
const envPath = fileURLToPath(new URL('./.env', import.meta.url));
export default defineConfig({
    server: {
        //wss is forced for realtime events if we use https, which doesn't work in dev mode
        https: existsSync(envPath) ? readFileSync(envPath).includes('VITE_SERVER_HTTPS=true') : false,
    },
    plugins: [
        mkcert(),
        VueRouter({
            dts: './dts/typed-router.d.ts',
            extensions: ['.vue'],
        }),
        vue({
            script: {
                defineModel: true,
            },
        }),
        vueJsx(),
        AutoImport({
            imports: [
                VueRouterAutoImports,
                'vue',
                '@vueuse/core',
                {
                    zod: ['z', 'ZodError'],
                    '@vee-validate/zod': ['toFormValidator', 'toFieldValidator'],
                    'vee-validate': ['useField', 'useForm'],
                    axios: ['AxiosError'],
                    pinia: ['storeToRefs'],
                    '@/common': ['propper'],
                    '@/common/utils': [
                        'jsonResource',
                        'jsonCollection',
                        'redirect404',
                        'mergePathsSeparator',
                        'mergePaths',
                        'makeUriFormatter',
                        'delay',
                        'delayAtleast',
                        'updateRefArray'
                    ],
                    '@/common/api': ['api'],
                    '@/common/error': ['errorWithoutStack'],
                },
                {
                    type: true,
                    from: 'vue-router/auto/routes',
                    imports: ['RouteNamedMap'],
                },
            ],
            dts: './dts/auto-imports.d.ts',
            dirs: ['./src/composables/**', './src/stores/**'],
            eslintrc: {
                enabled: true,
            },
        }),
        Components({
            dts: './dts/auto-components.d.ts',
        }),
        Layouts({}),
    ],
    test: {
        includeSource: ['src/**/*.{ts,vue}'],
        environment: 'jsdom',
        globals: true,
        globalSetup: ['indexedDB']
    },
    define: {
        'import.meta.vitest': false,
    },
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url)),
        },
    },
});