Update Vue, vue-router, pinia.

Add eslint import rules.
Fixed vitest freeze.
Remove vitest global setup code.

.eslintrc.yml

@@ -31,30 +31,50 @@ plugins:
 rules:
   require-jsdoc: warn
   no-unused-vars: warn
-  '@typescript-eslint/array-type':
+  '@typescript-eslint/ban-ts-comment': off # Enable @ts-ignore etc.
+  '@typescript-eslint/consistent-type-imports': # Enable import sort order, see bellow.
     - error
-    - default: array
-    - readonly: array
-  '@typescript-eslint/ban-ts-comment': off
-  '@typescript-eslint/explicit-function-return-type': off
-  '@typescript-eslint/no-confusing-void-expression': off
-  '@typescript-eslint/no-dynamic-delete': off
-  '@typescript-eslint/no-extraneous-class': off
-  '@typescript-eslint/no-floating-promises': off
-  '@typescript-eslint/prefer-nullish-coalescing': off
-  '@typescript-eslint/strict-boolean-expressions': off
-  '@typescript-eslint/triple-slash-reference': off
-  import/default: off
-  import/no-default-export: off # Fix for Vuetify
-  import/no-named-as-default: off # Fix for Vuetify
-  import/no-named-as-default-member: off # Fix for Vuetify
+    - prefer: type-imports
+  '@typescript-eslint/explicit-function-return-type': off # Fix for pinia
+  '@typescript-eslint/no-confusing-void-expression':
+    - error
+    - ignoreArrowShorthand: true # Allow short land for pretter
+  '@typescript-eslint/strict-boolean-expressions': off # Fix for vite import.meta.env
+  '@typescript-eslint/triple-slash-reference': off # Fix for vite env.d.ts.
+  import/default: off # Fix for Vue setup style
+  import/no-default-export: off # Fix for Vue setup style
+  import/no-unresolved:
+    - error
+    - ignore:
+        - '^virtual:' # Fix for unocss and vite.
+  import/order: # Sort Import Order. see https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/order.md#importorder-enforce-a-convention-in-module-import-order
+    - error
+    - groups:
+        ['builtin', 'external', 'parent', 'sibling', 'index', 'object', 'type']
+      pathGroups:
+        # Vue Core
+        - pattern: '{vue,vue-router,pinia,vite,vitest,vitest/**,@vitejs/**,@vue/**}'
+          group: external
+          position: before
+        # UI Library
+        - pattern: '{vuetify,vuetify/**}'
+          group: parent
+          position: before
+        # Internal Codes
+        - pattern: '{@/plugins/**,@/stores/**,@/router.ts,@/helpers/**,@/interfaces/**,@/types/**,@/components/**,@/views/**}'
+          group: internal
+          position: before
+      pathGroupsExcludedImportTypes:
+        - builtin
+      alphabetize:
+        order: asc
+      newlines-between: always
   tsdoc/syntax: warn
-  vue/html-self-closing:
+  vue/html-self-closing: # A tag with no content should be written like <br />.
     - error
     - html:
         void: always
-  vue/multi-word-component-names: warn
-  vue/no-template-shadow: off # for Vuetify tooltip fix
+  vue/multi-word-component-names: warn # Mitigate non-multiword component name errors to warnings.
   vuetify/no-deprecated-components: warn # for Vuetify Labs Fix (v-data-tables etc.)
 settings:
   import/parsers:

package.json

@@ -2,7 +2,7 @@
   "$schema": "https://json.schemastore.org/package.json",
   "name": "vite-vuetify-ts-starter",
   "description": "Vue3 Vuetify TypeScript Startar project for Vite.",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "license": "MIT",
   "type": "module",
   "private": true,
@@ -42,23 +42,23 @@
   "dependencies": {
     "@mdi/font": "^7.2.96",
     "core-js": "^3.30.2",
-    "pinia": "^2.0.36",
+    "pinia": "^2.1.3",
     "pinia-plugin-persistedstate": "^3.1.0",
-    "vue": "^3.3.1",
-    "vue-router": "^4.2.0",
-    "vuetify": "^3.2.4",
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.1",
+    "vuetify": "^3.2.5",
     "webfontloader": "^1.6.28"
   },
   "devDependencies": {
     "@babel/types": "^7.21.5",
     "@rushstack/eslint-patch": "^1.2.0",
     "@tsconfig/node-lts": "^18.12.2",
     "@types/jsdom": "^21.1.1",
-    "@types/node": "^20.1.3",
+    "@types/node": "^20.2.1",
     "@types/webfontloader": "^1.6.35",
-    "@typescript-eslint/eslint-plugin": "^5.59.5",
-    "@vitejs/plugin-vue": "^4.2.2",
-    "@vitest/coverage-c8": "^0.31.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.6",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitest/coverage-c8": "^0.31.1",
     "@vue/eslint-config-prettier": "^7.1.0",
     "@vue/eslint-config-typescript": "^11.0.3",
     "@vue/test-utils": "^2.3.2",
@@ -69,7 +69,7 @@
     "eslint-import-resolver-typescript": "^3.5.5",
     "eslint-plugin-html": "^7.1.0",
     "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-n": "^15.7.0",
+    "eslint-plugin-n": "^16.0.0",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-tsdoc": "^0.2.17",
     "eslint-plugin-vue": "latest",
@@ -82,20 +82,20 @@
     "npm-run-all": "^4.1.5",
     "postcss-html": "^1.5.0",
     "prettier": "^2.8.8",
-    "rimraf": "^5.0.0",
+    "rimraf": "^5.0.1",
     "rollup-plugin-visualizer": "^5.9.0",
     "sass": "^1.62.1",
-    "stylelint": "^15.6.1",
+    "stylelint": "^15.6.2",
     "stylelint-config-recommended-scss": "^11.0.0",
     "stylelint-config-recommended-vue": "^1.4.0",
     "stylelint-order": "^6.0.3",
     "typescript": "*",
     "unplugin-vue-components": "^0.24.1",
-    "vite": "^4.3.5",
+    "vite": "^4.3.8",
     "vite-plugin-checker": "0.6.0",
     "vite-plugin-vuetify": "^1.0.2",
-    "vitest": "^0.31.0",
-    "vue-eslint-parser": "^9.2.1",
+    "vitest": "^0.31.1",
+    "vue-eslint-parser": "^9.3.0",
     "vue-tsc": "^1.7.0"
   },
   "husky": {

src/App.vue

@@ -9,15 +9,15 @@ import {
   type Ref,
   type WritableComputedRef,
 } from 'vue';
+
 import { useTheme } from 'vuetify';
-// Stores
-import { useGlobal, useConfig } from '@/store';
 
 // Components
 import AppBarMenuComponent from '@/components/AppBarMenuComponent.vue';
 import DrawerComponent from '@/components/DrawerComponent.vue';
 
 import logo from '@/assets/logo.svg';
+import { useGlobal, useConfig } from '@/store';
 
 /** Vuetify Theme */
 const theme = useTheme();

src/components/HelloWorld.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { createVuetify } from 'vuetify';
+
 import Meta from '@/Meta';
 
 const title = import.meta.env.VITE_APP_TITLE;

src/components/__tests__/HelloWorld.spec.ts

@@ -1,7 +1,7 @@
-import { describe, expect, it } from 'vitest';
 import { mount } from '@vue/test-utils';
-import vuetify, { components } from '../../plugins/vuetify';
+import { describe, expect, it } from 'vitest';
 
+import vuetify, { components } from '../../plugins/vuetify';
 import HelloWorld from '../HelloWorld.vue';
 
 describe('HelloWorld', () => {

src/main.ts

@@ -4,14 +4,12 @@
 
 // Load vue core
 import { createApp } from 'vue';
-import router from './router';
-import store from './store';
 
-// Load Vuetify
-import vuetify from './plugins/vuetify';
+import vuetify from '@/plugins/vuetify';
 
-// Load Layout vue.
-import App from './App.vue';
+import App from '@/App.vue';
+import router from '@/router';
+import store from '@/store';
 
 /** Register Vue */
 const vue = createApp(App);

src/plugins/vuetify.ts

@@ -4,18 +4,11 @@
 import 'vuetify/styles';
 import '@mdi/font/css/materialdesignicons.css';
 
-import { aliases, mdi } from 'vuetify/iconsets/mdi';
 import { createVuetify } from 'vuetify';
-
-// For test use. Do not include createVuetify()
-// see https://vuetifyjs.com/en/features/treeshaking/
 import * as components from 'vuetify/components';
 import * as directives from 'vuetify/directives';
-
-// If you use Vuetify Labs
-// https://vuetifyjs.com/en/labs/introduction/
+import { aliases, mdi } from 'vuetify/iconsets/mdi';
 import * as labs from 'vuetify/labs/components';
-
 // Translations provided by Vuetify
 import { en } from 'vuetify/locale';
 

src/router.ts

@@ -1,3 +1,4 @@
+import { nextTick } from 'vue';
 import {
   createRouter,
   createWebHistory,
@@ -6,15 +7,15 @@ import {
   type RouteLocationNormalized,
   type RouteRecordRaw,
 } from 'vue-router';
-import { nextTick } from 'vue';
 
 // Pinia Store
+import HomeView from '@/views/HomeView.vue';
+
 import { useGlobal } from '@/store';
 
 // import { goTo } from 'vuetify/lib/services/goto/index.mjs';
 
 // Components
-import HomeView from '@/views/HomeView.vue';
 
 /** Router Rules */
 const routes: RouteRecordRaw[] = [

src/store/GlobalStore.ts

@@ -1,5 +1,5 @@
-import { ref, type Ref } from 'vue';
 import { defineStore } from 'pinia';
+import { ref, type Ref } from 'vue';
 
 /** Global Store */
 const useGlobalStore = defineStore('global', () => {

src/store/index.ts

@@ -1,10 +1,10 @@
-import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
 import { createPinia, type Pinia } from 'pinia';
 
-// Pinia Stores
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
 
-import useGlobal from '@/store/GlobalStore';
+// Pinia Stores
 import useConfig from '@/store/ConfigStore';
+import useGlobal from '@/store/GlobalStore';
 
 /** Pinia Store */
 const pinia: Pinia = createPinia();

vite.config.ts

@@ -1,10 +1,11 @@
-import { fileURLToPath, URL } from 'node:url';
 import { writeFileSync } from 'node:fs';
+import { fileURLToPath, URL } from 'node:url';
 
+import vue from '@vitejs/plugin-vue';
 import { defineConfig, type UserConfig } from 'vite';
+
 import { visualizer } from 'rollup-plugin-visualizer';
 import { checker } from 'vite-plugin-checker';
-import vue from '@vitejs/plugin-vue';
 import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';
 
 // @ts-nocheck

vitest.config.ts

@@ -1,7 +1,8 @@
 import { fileURLToPath } from 'node:url';
 
-import { configDefaults, defineConfig } from 'vitest/config';
 import { mergeConfig } from 'vite';
+import { configDefaults, defineConfig } from 'vitest/config';
+
 import viteConfig from './vite.config';
 /**
  * Vitest Configure
@@ -11,25 +12,9 @@ import viteConfig from './vite.config';
 export default mergeConfig(
   viteConfig,
   defineConfig({
-    // plugins
-    plugins: [
-      {
-        name: 'vitest-plugin-beforeall',
-        config: () => ({
-          test: {
-            setupFiles: [
-              fileURLToPath(new URL('./vitest/beforeAll.ts', import.meta.url)),
-            ],
-          },
-        }),
-      },
-    ],
     test: {
       environment: 'jsdom',
       exclude: [...configDefaults.exclude, 'e2e/*'],
-      globalSetup: [
-        fileURLToPath(new URL('./vitest/setup.ts', import.meta.url)),
-      ],
       deps: {
         inline: [/vuetify/],
       },