dev (#8)

* chore(package): upgrade to last version

* chore(packages): upgrade all packages to latest version

* chore: update packages

* chore: use eslint 8

* feat: add auto import

* build: support vue-router

* chore: update Inter variable font

* doc: update README

.eslintrc-auto-import.json

@@ -0,0 +1,73 @@
+{
+  "globals": {
+    "Component": true,
+    "ComponentPublicInstance": true,
+    "ComputedRef": true,
+    "EffectScope": true,
+    "ExtractDefaultPropTypes": true,
+    "ExtractPropTypes": true,
+    "ExtractPublicPropTypes": true,
+    "InjectionKey": true,
+    "PropType": true,
+    "Ref": true,
+    "VNode": true,
+    "WritableComputedRef": true,
+    "computed": true,
+    "createApp": true,
+    "customRef": true,
+    "defineAsyncComponent": true,
+    "defineComponent": true,
+    "effectScope": true,
+    "getCurrentInstance": true,
+    "getCurrentScope": true,
+    "h": true,
+    "inject": true,
+    "isProxy": true,
+    "isReactive": true,
+    "isReadonly": true,
+    "isRef": true,
+    "markRaw": true,
+    "nextTick": true,
+    "onActivated": true,
+    "onBeforeMount": true,
+    "onBeforeRouteLeave": true,
+    "onBeforeRouteUpdate": true,
+    "onBeforeUnmount": true,
+    "onBeforeUpdate": true,
+    "onDeactivated": true,
+    "onErrorCaptured": true,
+    "onMounted": true,
+    "onRenderTracked": true,
+    "onRenderTriggered": true,
+    "onScopeDispose": true,
+    "onServerPrefetch": true,
+    "onUnmounted": true,
+    "onUpdated": true,
+    "provide": true,
+    "reactive": true,
+    "readonly": true,
+    "ref": true,
+    "resolveComponent": true,
+    "shallowReactive": true,
+    "shallowReadonly": true,
+    "shallowRef": true,
+    "toRaw": true,
+    "toRef": true,
+    "toRefs": true,
+    "toValue": true,
+    "triggerRef": true,
+    "unref": true,
+    "useAttrs": true,
+    "useCssModule": true,
+    "useCssVars": true,
+    "useLink": true,
+    "useRoute": true,
+    "useRouter": true,
+    "useSlots": true,
+    "useTheme": true,
+    "watch": true,
+    "watchEffect": true,
+    "watchPostEffect": true,
+    "watchSyncEffect": true
+  }
+}

.eslintrc.js → .eslintrc.cjs

@@ -8,13 +8,17 @@ module.exports = {
     'airbnb-base',
     'plugin:vue/vue3-recommended',
     'plugin:tailwindcss/recommended',
+    './.eslintrc-auto-import.json',
   ],
   parserOptions: {
     ecmaVersion: 2021,
   },
   plugins: ['vue', 'tailwindcss'],
   rules: {
-    'import/extensions': 'off',
+    'import/extensions': ['error', 'always', {
+      js: 'always',
+      vue: 'always',
+    }],
     'import/no-extraneous-dependencies': [0, { 'packageDir ': './src/' }],
     'max-len': ['error', {
       code: 160,

.github/workflows/cd.yml

@@ -12,7 +12,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node: [16]
+        node: [20]
 
     runs-on: ${{ matrix.os }}
 
@@ -23,7 +23,7 @@ jobs:
       - name: Setup PNPM
         uses: pnpm/action-setup@v2.0.1
         with:
-          version: 6.25.1
+          version: 9.2.0
 
       - name: Setup Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v2

.github/workflows/pull_request.yml

@@ -10,7 +10,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node: [16]
+        node: [20]
 
     runs-on: ${{ matrix.os }}
 
@@ -21,7 +21,7 @@ jobs:
       - name: Setup PNPM
         uses: pnpm/action-setup@v2.0.1
         with:
-          version: 6.25.1
+          version: 9.2.0
 
       - name: Setup Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v2

README.md

@@ -12,8 +12,9 @@ Features:
 - ⚡️ [Vite](https://vitejs.dev/guide/)
 - 🗂 [PNPM](https://pnpm.io)
 - 🛣 [Vue Router](https://github.com/vuejs/vue-router-next)
+- 🔄 [Auto import](https://github.com/unplugin/unplugin-auto-import)
 - 🎨 [Tailwind CSS](https://tailwindcss.com/docs/)
-- 🔍 [Eslint with airbnb and stylelint](https://github.com/airbnb/javascript)
+- 🔍 [Eslint with airbnb / Tailwind CSS / stylelint](https://github.com/airbnb/javascript)
 - 🌗 [Light and dark mode composable](https://github.com/lecoueyl/vue3-template/blob/main/src/composables/theme.js)
 - 🔡 [Inter var font](https://rsms.me/inter/)
 - 📄 [Github pages action](https://pages.github.com)

index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8" />
+    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vue.js starter template</title>
   </head>

package.json

@@ -1,5 +1,6 @@
 {
   "name": "vue3-template",
+  "type": "module",
   "version": "0.0.0",
   "scripts": {
     "build": "vite build",
@@ -15,24 +16,25 @@
     "vue-router": "^4.1.6"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitejs/plugin-vue": "^5.0.5",
     "autoprefixer": "^10.4.13",
-    "eslint": "^8.34.0",
+    "eslint": "^8.57.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-tailwindcss": "^3.9.0",
+    "eslint-plugin-tailwindcss": "^3.17.4",
     "eslint-plugin-vue": "^9.9.0",
     "postcss": "^8.4.21",
     "postcss-html": "^1.5.0",
-    "stylelint": "^15.2.0",
+    "stylelint": "^16.6.1",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-recommended-vue": "^1.4.0",
-    "stylelint-config-standard": "^30.0.1",
+    "stylelint-config-standard": "^36.0.1",
     "tailwindcss": "^3.2.7",
-    "vite": "^4.1.4",
+    "unplugin-auto-import": "^0.17.6",
+    "vite": "^5.3.3",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-stylelint": "^4.2.0",
-    "vite-svg-loader": "^4.0.0"
+    "vite-plugin-stylelint": "^5.3.1",
+    "vite-svg-loader": "^5.1.0"
   }
 }