chore: bump deps

Also realign + fix config files

.eslintrc-auto-import.json

@@ -82,6 +82,12 @@
     "ExtractDefaultPropTypes": true,
     "ExtractPropTypes": true,
     "ExtractPublicPropTypes": true,
-    "WritableComputedRef": true
+    "WritableComputedRef": true,
+    "getActiveHead": true,
+    "injectHead": true,
+    "useHeadSafe": true,
+    "useServerHead": true,
+    "useServerHeadSafe": true,
+    "useServerSeoMeta": true
   }
 }

.eslintrc.cjs

@@ -8,9 +8,15 @@ module.exports = {
     'eslint:recommended',
     '@vue/eslint-config-typescript',
     '@vue/eslint-config-prettier/skip-formatting',
-    'plugin:security/recommended',
+    'plugin:security/recommended-legacy',
     './.eslintrc-auto-import.json',
   ],
+  overrides: [
+    {
+      files: ['tests/e2e/**/*.{test,spec}.{js,ts,jsx,tsx}'],
+      extends: ['plugin:playwright/recommended'],
+    },
+  ],
   parserOptions: {
     ecmaVersion: 'latest',
   },
@@ -28,4 +34,5 @@ module.exports = {
     defineExpose: 'readonly',
     withDefaults: 'readonly',
   },
+  ignorePatterns: ['tests/e2e/**/*.ts'],
 }

.github/renovate.json

@@ -1,35 +1,21 @@
 {
-  "extends": [
-    "config:base",
-    "group:all",
-    "schedule:weekly",
-    ":widenPeerDependencies"
-  ],
-  "enabledManagers": [
-    "npm",
-    "github-actions"
-  ],
+  "extends": ["config:base", "group:all", "schedule:weekly", ":widenPeerDependencies"],
+  "enabledManagers": ["npm", "github-actions"],
   "packageRules": [
     {
-      "updateTypes": [
-        "patch"
-      ],
+      "updateTypes": ["patch"],
       "enabled": false
     },
     {
-      "matchManagers": [
-        "npm"
-      ],
+      "matchManagers": ["npm"],
       "automerge": true,
       "stabilityDays": 2
     },
     {
-      "matchPackagePatterns": [
-        "github-actions"
-      ],
+      "matchPackagePatterns": ["github-actions"],
       "automerge": true
     }
   ],
   "timezone": "Europe/Helsinki",
   "dependencyDashboard": true
-}
+}

.github/workflows/main.yml

@@ -29,19 +29,19 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
         with:
           path: /home/runner/.local/share/pnpm/store
           key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v3
         with:
-          version: 8
+          version: 9
           run_install: true
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 22
           cache: 'pnpm'
 
       - name: Type Check

.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 120,
+  "trailingComma": "es5"
+}

CHANGES.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 5.3.0 (2024-05-02)
+
+- Refactor: realigned with create vue
+- Chore: bump deps
+
 ## 5.2.1 (2024-01-13)
 
 - Chore: Added `github-actions` manager for Renovate

auto-imports.d.ts

@@ -15,11 +15,13 @@ declare global {
   const defineComponent: typeof import('vue')['defineComponent']
   const defineStore: typeof import('pinia')['defineStore']
   const effectScope: typeof import('vue')['effectScope']
+  const getActiveHead: typeof import('@unhead/vue')['getActiveHead']
   const getActivePinia: typeof import('pinia')['getActivePinia']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
   const h: typeof import('vue')['h']
   const inject: typeof import('vue')['inject']
+  const injectHead: typeof import('@unhead/vue')['injectHead']
   const isProxy: typeof import('vue')['isProxy']
   const isReactive: typeof import('vue')['isReactive']
   const isReadonly: typeof import('vue')['isReadonly']
@@ -66,11 +68,15 @@ declare global {
   const useAttrs: typeof import('vue')['useAttrs']
   const useCssModule: typeof import('vue')['useCssModule']
   const useCssVars: typeof import('vue')['useCssVars']
-  const useHead: typeof import('@vueuse/head')['useHead']
+  const useHead: typeof import('@unhead/vue')['useHead']
+  const useHeadSafe: typeof import('@unhead/vue')['useHeadSafe']
   const useLink: typeof import('vue-router')['useLink']
   const useRoute: typeof import('vue-router')['useRoute']
   const useRouter: typeof import('vue-router')['useRouter']
-  const useSeoMeta: typeof import('@vueuse/head')['useSeoMeta']
+  const useSeoMeta: typeof import('@unhead/vue')['useSeoMeta']
+  const useServerHead: typeof import('@unhead/vue')['useServerHead']
+  const useServerHeadSafe: typeof import('@unhead/vue')['useServerHeadSafe']
+  const useServerSeoMeta: typeof import('@unhead/vue')['useServerSeoMeta']
   const useSlots: typeof import('vue')['useSlots']
   const useStore: typeof import('@/store')['useStore']
   const watch: typeof import('vue')['watch']
@@ -87,6 +93,7 @@ declare global {
 // for vue template auto import
 import { UnwrapRef } from 'vue'
 declare module 'vue' {
+  interface GlobalComponents {}
   interface ComponentCustomProperties {
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
     readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
@@ -98,11 +105,13 @@ declare module 'vue' {
     readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
     readonly defineStore: UnwrapRef<typeof import('pinia')['defineStore']>
     readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
+    readonly getActiveHead: UnwrapRef<typeof import('@unhead/vue')['getActiveHead']>
     readonly getActivePinia: UnwrapRef<typeof import('pinia')['getActivePinia']>
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
     readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
     readonly h: UnwrapRef<typeof import('vue')['h']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
+    readonly injectHead: UnwrapRef<typeof import('@unhead/vue')['injectHead']>
     readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
     readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
     readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
@@ -149,11 +158,15 @@ declare module 'vue' {
     readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
     readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
     readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
-    readonly useHead: UnwrapRef<typeof import('@vueuse/head')['useHead']>
+    readonly useHead: UnwrapRef<typeof import('@unhead/vue')['useHead']>
+    readonly useHeadSafe: UnwrapRef<typeof import('@unhead/vue')['useHeadSafe']>
     readonly useLink: UnwrapRef<typeof import('vue-router')['useLink']>
     readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
     readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
-    readonly useSeoMeta: UnwrapRef<typeof import('@vueuse/head')['useSeoMeta']>
+    readonly useSeoMeta: UnwrapRef<typeof import('@unhead/vue')['useSeoMeta']>
+    readonly useServerHead: UnwrapRef<typeof import('@unhead/vue')['useServerHead']>
+    readonly useServerHeadSafe: UnwrapRef<typeof import('@unhead/vue')['useServerHeadSafe']>
+    readonly useServerSeoMeta: UnwrapRef<typeof import('@unhead/vue')['useServerSeoMeta']>
     readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
     readonly useStore: UnwrapRef<typeof import('@/store')['useStore']>
     readonly watch: UnwrapRef<typeof import('vue')['watch']>
@@ -163,6 +176,7 @@ declare module 'vue' {
   }
 }
 declare module '@vue/runtime-core' {
+  interface GlobalComponents {}
   interface ComponentCustomProperties {
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
     readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
@@ -174,11 +188,13 @@ declare module '@vue/runtime-core' {
     readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
     readonly defineStore: UnwrapRef<typeof import('pinia')['defineStore']>
     readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
+    readonly getActiveHead: UnwrapRef<typeof import('@unhead/vue')['getActiveHead']>
     readonly getActivePinia: UnwrapRef<typeof import('pinia')['getActivePinia']>
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
     readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
     readonly h: UnwrapRef<typeof import('vue')['h']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
+    readonly injectHead: UnwrapRef<typeof import('@unhead/vue')['injectHead']>
     readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
     readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
     readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
@@ -225,11 +241,15 @@ declare module '@vue/runtime-core' {
     readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
     readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
     readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
-    readonly useHead: UnwrapRef<typeof import('@vueuse/head')['useHead']>
+    readonly useHead: UnwrapRef<typeof import('@unhead/vue')['useHead']>
+    readonly useHeadSafe: UnwrapRef<typeof import('@unhead/vue')['useHeadSafe']>
     readonly useLink: UnwrapRef<typeof import('vue-router')['useLink']>
     readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
     readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
-    readonly useSeoMeta: UnwrapRef<typeof import('@vueuse/head')['useSeoMeta']>
+    readonly useSeoMeta: UnwrapRef<typeof import('@unhead/vue')['useSeoMeta']>
+    readonly useServerHead: UnwrapRef<typeof import('@unhead/vue')['useServerHead']>
+    readonly useServerHeadSafe: UnwrapRef<typeof import('@unhead/vue')['useServerHeadSafe']>
+    readonly useServerSeoMeta: UnwrapRef<typeof import('@unhead/vue')['useServerSeoMeta']>
     readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
     readonly useStore: UnwrapRef<typeof import('@/store')['useStore']>
     readonly watch: UnwrapRef<typeof import('vue')['watch']>

components.d.ts

@@ -1,10 +1,10 @@
 /* eslint-disable */
-/* prettier-ignore */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
+/* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']

package.json

@@ -1,70 +1,76 @@
 {
   "name": "vite-ts-tailwind-starter",
-  "version": "5.2.1",
+  "version": "5.3.0",
   "type": "module",
   "scripts": {
     "dev": "cross-env DEBUG=0 vite",
-    "build": "vite build",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "build-only": "vite build",
     "preview": "vite build && vite preview",
     "start": "pnpm dev & wait-on tcp:3000 -v",
     "test": "vitest",
     "coverage": "vitest run --coverage",
     "test-e2e": "playwright test --headed",
     "test:ci": "vitest run --coverage",
     "test:ci-e2e": "playwright test",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "type-check": "vue-tsc --build --force"
   },
   "dependencies": {
-    "@vueuse/head": "2.0.0",
+    "@unhead/vue": "1.9.8",
     "pinia": "2.1.7",
-    "vue": "3.4.0",
-    "vue-router": "4.2.5"
+    "vue": "3.4.26",
+    "vue-router": "4.3.2"
   },
   "devDependencies": {
-    "@egoist/tailwindcss-icons": "1.7.1",
-    "@iconify/json": "2.2.163",
+    "@egoist/tailwindcss-icons": "1.7.4",
+    "@iconify/json": "2.2.205",
     "@iconify/types": "2.0.0",
     "@pinia/testing": "0.1.3",
-    "@playwright/test": "1.40.1",
-    "@rushstack/eslint-patch": "1.6.1",
+    "@playwright/test": "1.43.1",
+    "@rushstack/eslint-patch": "^1.10.2",
     "@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",
+    "@tailwindcss/typography": "0.5.13",
+    "@tsconfig/node20": "^20.1.4",
+    "@types/jsdom": "^21.1.6",
     "@types/lodash-es": "4.17.12",
-    "@types/node": "20.11.0",
-    "@typescript-eslint/eslint-plugin": "6.18.1",
-    "@typescript-eslint/parser": "6.18.1",
-    "@vitejs/plugin-vue": "5.0.0",
-    "@vitest/coverage-v8": "1.2.0",
+    "@types/node": "^20.12.8",
+    "@typescript-eslint/eslint-plugin": "7.8.0",
+    "@typescript-eslint/parser": "7.8.0",
+    "@vitejs/plugin-vue": "5.0.4",
+    "@vitest/coverage-v8": "1.5.3",
     "@vue/eslint-config-prettier": "9.0.0",
-    "@vue/eslint-config-typescript": "12.0.0",
-    "@vue/test-utils": "2.4.3",
-    "@vue/tsconfig": "0.5.1",
-    "autoprefixer": "10.4.16",
+    "@vue/eslint-config-typescript": "13.0.0",
+    "@vue/test-utils": "^2.4.5",
+    "@vue/tsconfig": "^0.5.1",
+    "autoprefixer": "10.4.19",
     "cross-env": "7.0.3",
-    "cssnano": "6.0.2",
-    "eslint": "8.56.0",
+    "cssnano": "7.0.1",
+    "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-node": "11.1.0",
+    "eslint-plugin-playwright": "1.6.0",
     "eslint-plugin-promise": "6.1.1",
-    "eslint-plugin-security": "2.1.0",
-    "eslint-plugin-vue": "9.20.1",
-    "jsdom": "23.2.0",
+    "eslint-plugin-security": "3.0.0",
+    "eslint-plugin-vue": "9.25.0",
+    "jsdom": "24.0.0",
     "lodash-es": "4.17.21",
-    "postcss": "8.4.32",
-    "postcss-import": "16.0.0",
-    "postcss-nesting": "12.0.2",
-    "tailwindcss": "3.4.0",
-    "typescript": "5.3.3",
-    "unplugin-auto-import": "0.17.3",
-    "unplugin-vue-components": "0.26.0",
-    "vite": "5.0.10",
-    "vitest": "1.2.0",
-    "vue-tsc": "1.8.27",
+    "npm-run-all2": "6.1.2",
+    "postcss": "8.4.38",
+    "postcss-import": "16.1.0",
+    "postcss-nesting": "12.1.2",
+    "prettier": "3.2.5",
+    "tailwindcss": "3.4.3",
+    "typescript": "5.4.5",
+    "unplugin-auto-import": "0.17.5",
+    "unplugin-vue-components": "0.27.0",
+    "vite": "5.2.10",
+    "vite-plugin-vue-devtools": "7.1.3",
+    "vitest": "1.5.3",
+    "vue-tsc": "2.0.16",
     "wait-on": "7.2.0"
   }
-}
+}