build: align vue templates with standard vue templates

Author: peterpeterparker

templates/vue-example/.editorconfig

@@ -0,0 +1,6 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}]
+charset = utf-8
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true

templates/vue-example/.eslintrc.cjs

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

templates/vue-example/.prettierrc.json

@@ -0,0 +1,25 @@
+import pluginVue from 'eslint-plugin-vue'
+import vueTsEslintConfig from '@vue/eslint-config-typescript'
+import pluginVitest from '@vitest/eslint-plugin'
+import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
+
+export default [
+  {
+    name: 'app/files-to-lint',
+    files: ['**/*.{ts,mts,tsx,vue}'],
+  },
+
+  {
+    name: 'app/files-to-ignore',
+    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
+  },
+
+  ...pluginVue.configs['flat/essential'],
+  ...vueTsEslintConfig(),
+
+  {
+    ...pluginVitest.configs.recommended,
+    files: ['src/**/__tests__/*'],
+  },
+  skipFormatting,
+]

templates/vue-example/eslint.config.js

@@ -9,18 +9,18 @@ export default defineDevConfig(() => ({
           read: 'managed' as const,
           write: 'managed' as const,
           memory: 'stable' as const,
-          mutablePermissions: true
-        }
+          mutablePermissions: true,
+        },
       ],
       storage: [
         {
           collection: 'images',
           read: 'managed' as const,
           write: 'managed' as const,
           memory: 'stable' as const,
-          mutablePermissions: true
-        }
-      ]
-    }
-  }
+          mutablePermissions: true,
+        },
+      ],
+    },
+  },
 }))

templates/vue-example/juno.dev.config.ts

@@ -7,39 +7,46 @@
     "dev": "vite",
     "build": "run-p type-check \"build-only {@}\" --",
     "preview": "vite preview",
+    "test:unit": "vitest",
     "build-only": "vite build",
-    "type-check": "vue-tsc --build --force",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
-    "format": "prettier --write .",
+    "type-check": "vue-tsc --build",
+    "lint": "eslint . --fix",
+    "format": "prettier --write src/",
     "postinstall:copy-auth": "node -e \"require('fs').cpSync('node_modules/@junobuild/core/dist/workers/', './public/workers', {recursive: true});\"",
     "postinstall": "npm run postinstall:copy-auth"
   },
   "dependencies": {
     "@junobuild/core": "^0.0.63",
-    "nanoid": "^5.0.7",
-    "pinia": "^2.2.2",
-    "vue": "^3.4.38",
-    "vue-router": "^4.4.3"
+    "nanoid": "^5.0.9",
+    "pinia": "^2.2.6",
+    "vue": "^3.5.13",
+    "vue-router": "^4.4.5"
   },
   "devDependencies": {
     "@junobuild/config": "^0.0.17",
     "@junobuild/vite-plugin": "^0.0.19",
-    "@rushstack/eslint-patch": "^1.10.4",
-    "@tsconfig/node20": "^20.1.4",
-    "@types/node": "^20.12.5",
-    "@vitejs/plugin-vue": "^5.1.3",
-    "@vue/eslint-config-prettier": "^9.0.0",
-    "@vue/eslint-config-typescript": "^13.0.0",
-    "@vue/tsconfig": "^0.5.1",
+    "@tsconfig/node22": "^22.0.0",
+    "@types/jsdom": "^21.1.7",
+    "@types/node": "^22.9.3",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue-jsx": "^4.1.1",
+    "@vitest/eslint-plugin": "1.1.10",
+    "@vue/eslint-config-prettier": "^10.1.0",
+    "@vue/eslint-config-typescript": "^14.1.3",
+    "@vue/test-utils": "^2.4.6",
+    "@vue/tsconfig": "^0.7.0",
     "autoprefixer": "^10.4.20",
-    "eslint": "^8.57.0",
-    "eslint-plugin-vue": "^9.27.0",
-    "npm-run-all2": "^6.2.2",
-    "postcss": "^8.4.41",
+    "eslint": "^9.14.0",
+    "eslint-plugin-vue": "^9.30.0",
+    "jsdom": "^25.0.1",
+    "npm-run-all2": "^7.0.1",
+    "postcss": "^8.4.49",
     "prettier": "^3.3.3",
-    "tailwindcss": "^3.4.10",
-    "typescript": "~5.4.0",
-    "vite": "^5.4.2",
-    "vue-tsc": "^2.1.2"
+    "tailwindcss": "^3.4.16",
+    "typescript": "~5.6.3",
+    "vite": "^6.0.1",
+    "vite-plugin-vue-devtools": "^7.6.5",
+    "vitest": "^2.1.5",
+    "vue-tsc": "^2.1.10"
   }
 }

templates/vue-example/package.json

@@ -1,6 +1,6 @@
 export default {
   plugins: {
     tailwindcss: {},
-    autoprefixer: {}
-  }
+    autoprefixer: {},
+  },
 }

templates/vue-example/postcss.config.js

@@ -11,9 +11,9 @@ onMounted(
   async () =>
     await initSatellite({
       workers: {
-        auth: true
-      }
-    })
+        auth: true,
+      },
+    }),
 )
 </script>
 

templates/vue-example/src/App.vue

@@ -8,7 +8,7 @@ defineProps<{
   <div
     :class="{
       'backdrop-blur-sm': spinner === true,
-      'backdrop-blur-xl': spinner !== true
+      'backdrop-blur-xl': spinner !== true,
     }"
     class="fixed inset-0 z-40 bg-white/30 flex items-center justify-center"
   >

templates/vue-example/src/components/Backdrop.vue

@@ -11,7 +11,7 @@ defineProps<{
     :class="{
       'opacity-25': disabled === true,
       'hover:bg-lavender-blue-600 dark:hover:bg-lavender-blue-300 dark:hover:text-black active:bg-lavender-blue-400 dark:active:bg-lavender-blue-500 active:shadow-none active:translate-x-[5px] active:translate-y-[5px]':
-        disabled !== true
+        disabled !== true,
     }"
   >
     <slot />

templates/vue-example/src/components/Button.vue

@@ -16,21 +16,21 @@ const delItem = async () => {
 
   try {
     const {
-      data: { url }
+      data: { url },
     } = doc
 
     if (url !== undefined) {
       const { pathname: fullPath } = new URL(url)
 
       await deleteAsset({
         collection: 'images',
-        fullPath
+        fullPath,
       })
     }
 
     await deleteDoc({
       collection: 'notes',
-      doc
+      doc,
     })
 
     await reload()

templates/vue-example/src/components/Delete.vue

@@ -44,7 +44,7 @@ const add = async () => {
       const { downloadUrl } = await uploadFile({
         collection: 'images',
         data: file.value,
-        filename
+        filename,
       })
 
       url = downloadUrl
@@ -58,9 +58,9 @@ const add = async () => {
         key,
         data: {
           text: inputText.value,
-          ...(url !== undefined && { url })
-        }
-      }
+          ...(url !== undefined && { url }),
+        },
+      },
     })
 
     setShowModal(false)

templates/vue-example/src/components/Modal.vue

@@ -9,7 +9,7 @@ const items = ref<Doc<Note>[]>([])
 const list = async () => {
   const { items: data } = await listDocs<Note>({
     collection: 'notes',
-    filter: {}
+    filter: {},
   })
 
   items.value = data

templates/vue-example/src/components/Table.vue

@@ -5,22 +5,22 @@ const config: Config = {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
   theme: {
     fontFamily: {
-      sans: ['JetBrains Mono', 'sans-serif', ...fontFamily.sans]
+      sans: ['JetBrains Mono', 'sans-serif', ...fontFamily.sans],
     },
     extend: {
       screens: {
-        tall: { raw: '(min-height: 800px)' }
+        tall: { raw: '(min-height: 800px)' },
       },
       animation: {
-        fade: 'fadeIn .25s ease-in-out'
+        fade: 'fadeIn .25s ease-in-out',
       },
 
       keyframes: {
         fadeIn: {
           from: { opacity: '0' },
-          to: { opacity: '1' }
-        }
-      }
+          to: { opacity: '1' },
+        },
+      },
     },
     colors: {
       inherit: 'inherit',
@@ -38,9 +38,9 @@ const config: Config = {
         600: '#606dcc',
         700: '#485299',
         800: '#303666',
-        900: '#181b33'
-      }
-    }
-  }
+        900: '#181b33',
+      },
+    },
+  },
 }
 export default config

templates/vue-example/tailwind.config.ts

@@ -6,7 +6,6 @@
     "composite": true,
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
 
-    "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
     }

templates/vue-example/tsconfig.app.json

@@ -6,6 +6,9 @@
     },
     {
       "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.vitest.json"
     }
   ]
 }

templates/vue-example/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@tsconfig/node20/tsconfig.json",
+  "extends": "@tsconfig/node22/tsconfig.json",
   "include": [
     "vite.config.*",
     "vitest.config.*",

templates/vue-example/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.app.json",
+  "exclude": [],
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.vitest.tsbuildinfo",
+
+    "lib": [],
+    "types": ["node", "jsdom"]
+  }
+}

templates/vue-example/tsconfig.vitest.json

@@ -1,14 +1,16 @@
 import { fileURLToPath, URL } from 'node:url'
+
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
 import juno from '@junobuild/vite-plugin'
 
-// https://vitejs.dev/config/
+// https://vite.dev/config/
 export default defineConfig({
-  plugins: [vue(), juno({ container: true })],
+  plugins: [vue(), vueJsx(), juno({ container: true })],
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
-    }
-  }
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
 })

templates/vue-example/vite.config.ts

@@ -0,0 +1,14 @@
+import { fileURLToPath } from 'node:url'
+import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
+import viteConfig from './vite.config'
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      environment: 'jsdom',
+      exclude: [...configDefaults.exclude, 'e2e/**'],
+      root: fileURLToPath(new URL('./', import.meta.url)),
+    },
+  }),
+)

templates/vue-example/vitest.config.ts

@@ -0,0 +1,6 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}]
+charset = utf-8
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true

templates/vue-starter/.editorconfig

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