feat: Vue 3.4 (#257)

* chore: bump deps

* refactor: rearranged TS configs

* fix: fix vitest config

* fix: modify type-check command

* refactor: move router and store under modules

* fix: re-enable coverage

* docs: upgrade README

* docs: cleaned up README

.eslintrc.cjs

@@ -5,6 +5,7 @@ module.exports = {
   root: true,
   extends: [
     'plugin:vue/vue3-recommended',
+    'eslint:recommended',
     '@vue/eslint-config-typescript',
     '@vue/eslint-config-prettier/skip-formatting',
     'plugin:security/recommended',

.gitignore

@@ -33,3 +33,4 @@ pnpm-debug.log*
 LOCAL_NOTES.md
 /playwright/.cache
 package-lock.json
+*.tsbuildinfo

CHANGES.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 5.2.0 (2023-12-29)
+
+- Feat: Upgrade Vue to version 3.4.0
+- Refactor: realign TS configs to conform `create-vue`
+- Refactor: moved store and router into package index
+
 ## 5.1.0 (2023-12-04)
 
 - Upgrade vitest to version 1.0.0

README.md

@@ -28,7 +28,6 @@ Please [check out the homepage](https://vite-ts-tailwind-starter.vercel.app/) fo
 - Predefined and fully typed global variables:
   - `VITE_APP_VERSION` is read from `package.json` version at build time
   - `VITE_APP_BUILD_EPOCH` is populated as `new Date().getTime()` at build time
-- Using newest `script setup` syntax (see the official [Script Setup documentation](https://vuejs.org/api/sfc-script-setup.html))
 - Vitest unit + component tests with code coverage
 - GitHub workflows
   - Renovatebot for keeping up with dependencies

src/components.d.ts → components.d.ts

@@ -7,7 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    HelloWorld: typeof import('./components/HelloWorld.vue')['default']
+    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

env.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  /**
+   * Automatically read from package.json version field
+   */
+  readonly VITE_APP_VERSION: string
+  readonly VITE_APP_BUILD_EPOCH?: string
+}
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

interface-extensions.d.ts

@@ -0,0 +1,20 @@
+import type { Router } from 'vue-router'
+import 'vue-router'
+import 'pinia'
+
+export {}
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    title?: string
+  }
+}
+
+declare module 'pinia' {
+  export interface PiniaCustomProperties {
+    /**
+     * Vue Router instance
+     */
+    router: Router
+  }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-ts-tailwind-starter",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "type": "module",
   "scripts": {
     "dev": "cross-env DEBUG=0 vite",
@@ -12,42 +12,43 @@
     "test-e2e": "playwright test --headed",
     "test:ci": "vitest run --coverage",
     "test:ci-e2e": "playwright test",
-    "type-check": "vue-tsc --noEmit -p tsconfig.json --composite false"
+    "type-check": "vue-tsc --build --force"
   },
   "dependencies": {
     "@vueuse/head": "2.0.0",
     "pinia": "2.1.7",
-    "vue": "3.3.10",
+    "vue": "3.4.0",
     "vue-router": "4.2.5"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "1.7.1",
-    "@iconify/json": "2.2.152",
+    "@iconify/json": "2.2.163",
     "@iconify/types": "2.0.0",
     "@pinia/testing": "0.1.3",
     "@playwright/test": "1.40.1",
-    "@rushstack/eslint-patch": "1.6.0",
+    "@rushstack/eslint-patch": "1.6.1",
     "@tailwindcss/aspect-ratio": "0.4.2",
     "@tailwindcss/forms": "0.5.7",
     "@tailwindcss/line-clamp": "0.4.4",
     "@tailwindcss/typography": "0.5.10",
+    "@tsconfig/node20": "20.1.2",
     "@types/jsdom": "21.1.6",
     "@types/lodash-es": "4.17.12",
-    "@types/node": "20.10.3",
-    "@typescript-eslint/eslint-plugin": "6.15.0",
-    "@typescript-eslint/parser": "6.15.0",
-    "@vitejs/plugin-vue": "4.5.1",
+    "@types/node": "20.10.5",
+    "@typescript-eslint/eslint-plugin": "6.16.0",
+    "@typescript-eslint/parser": "6.16.0",
+    "@vitejs/plugin-vue": "5.0.0",
     "@vitest/coverage-v8": "1.1.0",
-    "@vue/eslint-config-prettier": "8.0.0",
+    "@vue/eslint-config-prettier": "9.0.0",
     "@vue/eslint-config-typescript": "12.0.0",
     "@vue/test-utils": "2.4.3",
-    "@vue/tsconfig": "0.5.0",
+    "@vue/tsconfig": "0.5.1",
     "autoprefixer": "10.4.16",
-    "cross-env": "^7.0.3",
-    "cssnano": "6.0.1",
+    "cross-env": "7.0.3",
+    "cssnano": "6.0.2",
     "eslint": "8.56.0",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-import": "2.29.0",
+    "eslint-plugin-import": "2.29.1",
     "eslint-plugin-node": "11.1.0",
     "eslint-plugin-promise": "6.1.1",
     "eslint-plugin-security": "2.1.0",
@@ -56,14 +57,14 @@
     "lodash-es": "4.17.21",
     "postcss": "8.4.32",
     "postcss-import": "15.1.0",
-    "postcss-nesting": "12.0.1",
+    "postcss-nesting": "12.0.2",
     "tailwindcss": "3.4.0",
-    "typescript": "5.3.2",
-    "unplugin-auto-import": "0.17.2",
+    "typescript": "5.3.3",
+    "unplugin-auto-import": "0.17.3",
     "unplugin-vue-components": "0.26.0",
-    "vite": "5.0.5",
+    "vite": "5.0.10",
     "vitest": "1.1.0",
-    "vue-tsc": "1.8.24",
+    "vue-tsc": "1.8.27",
     "wait-on": "7.2.0"
   }
 }