Follow createVue 3.6.1.

Review eslint settings.
Update yarn-3.5.0
Removen unused files.

.eslintignore

@@ -5,3 +5,4 @@ coverage/
 dist/
 public/assets/
 tsconfig.*.json
+vitest/

.eslintrc.yml

@@ -1,47 +1,44 @@
-root: true
 env:
   browser: true
-  es2016: true # Vue recommended
+  es2021: true
   node: true
 extends:
-  - eslint:recommended
-  - google
-  - plugin:@typescript-eslint/eslint-recommended
+  - standard-with-typescript
   - plugin:import/recommended
   - plugin:import/typescript
-  - plugin:jsdoc/recommended
   - plugin:vue/recommended
   - plugin:vuejs-accessibility/recommended
   - plugin:yaml/recommended
   - '@vue/eslint-config-prettier'
-plugins:
-  - '@typescript-eslint'
-  - jsdoc
-  - tsdoc
-  - html
-  - yaml
-  - vue
+overrides:
+  - files:
+      - '*.html'
+    processor: vue/.vue
 parser: vue-eslint-parser
 parserOptions:
   ecmaVersion: latest
   parser: '@typescript-eslint/parser'
   sourceType: module
   createDefaultProgram: true
   project:
-    - ./tsconfig.json
+    - ./tsconfig.app.json
+    - ./tsconfig.node.json
+    - ./tsconfig.vitest.json
+  extraFileExtensions:
+    - .vue
+plugins:
+  - import
+  - tsdoc
+  - html
+  - yaml
+  - vue
 rules:
-  new-cap: off
-  no-invalid-this: off
-  no-unused-vars: warn
   require-jsdoc: warn
-  valid-jsdoc: off
-  jsdoc/require-param-type: off
-  jsdoc/require-param:
-    - off
-    - enableRootFixer: false
-  jsdoc/require-returns-description: off
-  jsdoc/require-returns-type: off
-  jsdoc/require-returns: off
+  no-unused-vars: warn
+  '@typescript-eslint/ban-ts-comment': off
+  '@typescript-eslint/no-confusing-void-expression': off
+  '@typescript-eslint/strict-boolean-expressions': off
+  '@typescript-eslint/triple-slash-reference': off
   tsdoc/syntax: warn
   vue/html-self-closing:
     - error

.yarnrc.yml

@@ -1,3 +1,3 @@
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-3.4.1.cjs
+yarnPath: .yarn/releases/yarn-3.5.0.cjs

README.md

@@ -18,6 +18,8 @@ Also, when the development server is executed, it is checked in real time by [vi
 
 [Vitest](https://github.com/vuejs/vue-test-utils) is included in the program for testing.
 
+First define `VITE_APP_TITLE` in your `.env` file.
+
 ### Composition API
 
 With the standard support for [Composition API](https://composition-api.vuejs.org/) in vue 2.7, the default format is composition api.

env.d.ts

@@ -1,13 +1,16 @@
 /* eslint-disable spaced-comment */
 /// <reference types="vite/client" />
 import {
-  ComputedOptions,
-  ComponentOptionsMixin,
-  MethodOptions,
+  type ComputedOptions,
+  type ComponentOptionsMixin,
+  type MethodOptions,
 } from 'vue/types/v3-component-options';
-import { ExtractPropTypes, ExtractDefaultPropTypes } from 'vue';
-import { EmitsOptions } from 'vue/types/v3-setup-context';
-import type { DefineComponent } from 'vue';
+import {
+  type ExtractPropTypes,
+  type ExtractDefaultPropTypes,
+  type DefineComponent,
+} from 'vue';
+import { type EmitsOptions } from 'vue/types/v3-setup-context';
 import type { Wrapper } from '@vue/test-utils';
 
 /** Vue */
@@ -16,33 +19,33 @@ declare module '*.vue' {
   export default Vue;
 }
 
-/** VueRouter fix */
-declare module 'vue' {
-  export interface GlobalComponents {
-    RouterLink: typeof import('vue-router')['RouterLink'];
-    RouterView: typeof import('vue-router')['RouterView'];
-  }
-}
-
 /**
  * Augment vue-test-utils to add support for Vue 2.7.
  *
  * @see {@link https://github.com/vuejs/vue-test-utils/issues/2026#issuecomment-1429963862}
  */
 declare module '@vue/test-utils' {
-  /** Component declared with defineComponent */
+  /**
+   * Component declared with defineComponent
+   *
+   * @param component -
+   * @param options -
+   */
   export function mount<
-    PropsOrPropOptions = {},
-    RawBindings = {},
-    D = {},
+    PropsOrPropOptions = Record<string, any>,
+    RawBindings = Record<string, any>,
+    D = Record<string, any>,
     C extends ComputedOptions = ComputedOptions,
     M extends MethodOptions = MethodOptions,
     Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
     Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
     E extends EmitsOptions = Record<string, any>,
     EE extends string = string,
     Props = Readonly<ExtractPropTypes<PropsOrPropOptions>>,
-    Defaults extends {} = ExtractDefaultPropTypes<PropsOrPropOptions>
+    Defaults extends Record<
+      string,
+      any
+    > = ExtractDefaultPropTypes<PropsOrPropOptions>
   >(
     component: DefineComponent<
       PropsOrPropOptions,
@@ -76,19 +79,27 @@ declare module '@vue/test-utils' {
     >
   >;
 
-  /** Component declared with defineComponent */
+  /**
+   * Component declared with defineComponent
+   *
+   * @param component -
+   * @param options -
+   */
   export function shallowMount<
-    PropsOrPropOptions = {},
-    RawBindings = {},
-    D = {},
+    PropsOrPropOptions = Record<string, any>,
+    RawBindings = Record<string, any>,
+    D = Record<string, any>,
     C extends ComputedOptions = ComputedOptions,
     M extends MethodOptions = MethodOptions,
     Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
     Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
     E extends EmitsOptions = Record<string, any>,
     EE extends string = string,
     Props = Readonly<ExtractPropTypes<PropsOrPropOptions>>,
-    Defaults extends {} = ExtractDefaultPropTypes<PropsOrPropOptions>
+    Defaults extends Record<
+      string,
+      any
+    > = ExtractDefaultPropTypes<PropsOrPropOptions>
   >(
     component: DefineComponent<
       PropsOrPropOptions,

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" href="./favicon.ico" type="image/vnd.microsoft.icon" />
-    <title>vite-vue2-ts-starter</title>
+    <title>%VITE_APP_TITLE%</title>
   </head>
 
   <body>

package.json

@@ -2,7 +2,7 @@
   "$schema": "https://json.schemastore.org/package.json",
   "name": "vite-vue2-ts-starter",
   "description": "Vue2 TypeScript Startar project for Vite.",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "license": "MIT",
   "type": "module",
   "private": true,
@@ -23,7 +23,7 @@
     "node": ">=18.15.0",
     "yarn": ">=1.22.19"
   },
-  "packageManager": "yarn@3.4.1",
+  "packageManager": "yarn@3.5.0",
   "scripts": {
     "dev": "vite",
     "clean": "rimraf ./node_modules/.vite",
@@ -48,27 +48,29 @@
   },
   "devDependencies": {
     "@types/jsdom": "^21.1.0",
-    "@types/node": "^18.15.0",
-    "@typescript-eslint/eslint-plugin": "^5.54.1",
-    "@typescript-eslint/parser": "^5.54.1",
+    "@types/node": "^18.15.3",
+    "@typescript-eslint/eslint-plugin": "^5.55.0",
+    "@typescript-eslint/parser": "^5.55.0",
     "@vitejs/plugin-vue2": "^2.2.0",
-    "@vitest/coverage-c8": "^0.29.2",
+    "@vitest/coverage-c8": "^0.29.3",
     "@vue/eslint-config-prettier": "^7.1.0",
     "@vue/test-utils": "^1.3.4",
     "@vue/tsconfig": "^0.1.3",
     "eslint": "^8.36.0",
-    "eslint-config-google": "^0.14.0",
+    "eslint-config-standard-with-typescript": "latest",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-import-resolver-typescript": "^3.5.3",
     "eslint-plugin-html": "^7.1.0",
     "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-jsdoc": "^40.0.1",
+    "eslint-plugin-jsdoc": "^40.0.3",
+    "eslint-plugin-n": "^15.6.1",
+    "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-tsdoc": "^0.2.17",
     "eslint-plugin-vue": "^9.9.0",
     "eslint-plugin-vuejs-accessibility": "^2.1.0",
     "eslint-plugin-yaml": "^0.5.0",
     "husky": "^8.0.3",
-    "jsdom": "^21.1.0",
+    "jsdom": "^21.1.1",
     "lint-staged": "^13.2.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.21",
@@ -77,15 +79,15 @@
     "prettier": "^2.8.4",
     "rimraf": "^4.4.0",
     "rollup-plugin-visualizer": "^5.9.0",
-    "sass": "^1.59.1",
-    "stylelint": "^15.2.0",
+    "sass": "^1.59.3",
+    "stylelint": "^15.3.0",
     "stylelint-config-recommended-scss": "^9.0.1",
     "stylelint-config-recommended-vue": "^1.4.0",
     "stylelint-order": "^6.0.3",
     "typescript": "^4.9.5",
-    "vite": "^4.1.4",
+    "vite": "^4.2.0",
     "vite-plugin-checker": "^0.5.6",
-    "vitest": "^0.29.2",
+    "vitest": "^0.29.3",
     "vue-eslint-parser": "^9.1.0",
     "vue-template-compiler": "^2.7.14",
     "vue-tsc": "^1.2.0"

src/main.ts

@@ -12,13 +12,16 @@ import App from '@/App.vue';
 Vue.config.productionTip = false;
 Vue.component('Teleport', teleport);
 
-const app = new Vue({
+const vue = new Vue({
   router,
   store,
   render: h => h(App),
 });
 
 // Run!
-router.isReady().then(() => {
-  app.$mount('#app');
-});
+router
+  .isReady()
+  .then(() => {
+    vue.$mount('#app');
+  })
+  .catch(e => console.error(e));

src/router.ts

@@ -20,7 +20,7 @@ const routes: RouteRecordRaw[] = [
     // 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'),
+    component: async () => await import('@/views/AboutView.vue'),
   },
 ];
 

tsconfig.app.json

@@ -6,7 +6,8 @@
   "compilerOptions": {
     "composite": true,
     "baseUrl": ".",
-    "paths": { "@/*": ["./src/*"] }
+    "paths": { "@/*": ["./src/*"] },
+    "newLine": "lf"
   },
   "vueCompilerOptions": { "target": 2.7 }
 }

tsconfig.json

@@ -2,9 +2,8 @@
   "$schema": "https://json.schemastore.org/tsconfig.json",
   "files": [],
   "references": [
-    { "path": "./tsconfig.config.json" },
     { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" },
     { "path": "./tsconfig.vitest.json" }
-  ],
-  "compilerOptions": { "newLine": "lf" }
+  ]
 }

tsconfig.config.json → tsconfig.node.json

@@ -5,7 +5,8 @@
     "vite.config.*",
     "vitest.config.*",
     "cypress.config.*",
-    "playwright.config.*"
+    "playwright.config.*",
+    "package.json"
   ],
   "compilerOptions": {
     "composite": true,

vite.config.ts

@@ -1,11 +1,14 @@
 import { fileURLToPath, URL } from 'node:url';
-import fs from 'node:fs';
+import { writeFileSync } from 'node:fs';
 
 import { checker } from 'vite-plugin-checker';
 import { defineConfig, type UserConfig } from 'vite';
 import { visualizer } from 'rollup-plugin-visualizer';
 import vue from '@vitejs/plugin-vue2';
 
+// @ts-nocheck
+import pkg from './package.json';
+
 /**
  * Vite Configure
  *
@@ -58,7 +61,6 @@ export default defineConfig(async ({ command, mode }): Promise<UserConfig> => {
       // Rollup Options
       // https://vitejs.dev/config/build-options.html#build-rollupoptions
       rollupOptions: {
-        // @ts-ignore
         output: {
           manualChunks: {
             // Split external library from transpiled code.
@@ -100,13 +102,13 @@ export default defineConfig(async ({ command, mode }): Promise<UserConfig> => {
   };
 
   // Write meta data.
-  fs.writeFileSync(
+  writeFileSync(
     fileURLToPath(new URL('./src/Meta.ts', import.meta.url)),
     `import type MetaInterface from '@/interfaces/MetaInterface';
 
 // This file is auto-generated by the build system.
 const meta: MetaInterface = {
-  version: '${require('./package.json').version}',
+  version: '${pkg.version}',
   date: '${new Date().toISOString()}',
 };
 export default meta;

vitest/beforeAll.ts

@@ -1,4 +1,5 @@
 import { beforeAll } from 'vitest';
+
 (global as any).CSS = { supports: () => false };
 
 beforeAll(() => {
@@ -8,6 +9,7 @@ beforeAll(() => {
     escape: (str: string) => str,
   };
   console.log(
-    '📝 [vitest] CSS.support:' + CSS.supports('selector(:focus-visible)')
+    '📝 [vitest] CSS.support:',
+    CSS.supports('selector(:focus-visible)')
   );
 });