feat: vite plugin VueDevtools (#460)

Author: Yordan-Ramchev

.github/workflows/ci.yml

@@ -68,6 +68,7 @@ jobs:
             flag-for-pinia: '--pinia'
             flag-for-vitest: '--vitest'
             flag-for-e2e: '--cypress'
+            flag-for-devtools: '--devtools'
 
           - node-version: 18
             os: macos-latest
@@ -77,6 +78,7 @@ jobs:
             flag-for-pinia: '--pinia'
             flag-for-vitest: '--vitest'
             flag-for-e2e: '--cypress'
+            flag-for-devtools: '--devtools'
 
           - node-version: 20
             os: ubuntu-latest
@@ -86,6 +88,7 @@ jobs:
             flag-for-pinia: '--pinia'
             flag-for-vitest: '--vitest'
             flag-for-e2e: '--cypress'
+            flag-for-devtools: '--devtools'
 
           - node-version: 16
             os: ubuntu-latest
@@ -95,10 +98,11 @@ jobs:
             flag-for-pinia: '--pinia'
             flag-for-vitest: '--vitest'
             flag-for-e2e: '--cypress'
+            flag-for-devtools: '--devtools'
     runs-on: ${{ matrix.os }}
     continue-on-error: ${{ matrix.os == 'windows-latest' }}
     env:
-      FEATURE_FLAGS: ${{ matrix.flag-for-ts }} ${{ matrix.flag-for-jsx }} ${{ matrix.flag-for-router }} ${{ matrix.flag-for-pinia }} ${{ matrix.flag-for-vitest }} ${{ matrix.flag-for-e2e }}
+      FEATURE_FLAGS: ${{ matrix.flag-for-ts }} ${{ matrix.flag-for-jsx }} ${{ matrix.flag-for-router }} ${{ matrix.flag-for-pinia }} ${{ matrix.flag-for-vitest }} ${{ matrix.flag-for-e2e }} ${{matrix.flag-for-devtools}}
       # Sometimes the Linux runner can't verify Cypress in 30s
       CYPRESS_VERIFY_TIMEOUT: 60000
     steps:

index.ts

@@ -83,6 +83,7 @@ async function init() {
   // --playwright
   // --eslint
   // --eslint-with-prettier (only support prettier through eslint for simplicity)
+  // --vue-devtools / --devtools
   // --force (for force overwriting)
 
   const args = process.argv.slice(2)
@@ -94,7 +95,9 @@ async function init() {
     'with-tests': { type: 'boolean' },
     tests: { type: 'boolean' },
     'vue-router': { type: 'boolean' },
-    router: { type: 'boolean' }
+    router: { type: 'boolean' },
+    'vue-devtools': { type: 'boolean' },
+    devtools: { type: 'boolean' }
   } as const
 
   const { values: argv } = parseArgs({
@@ -116,7 +119,8 @@ async function init() {
       argv.cypress ??
       argv.nightwatch ??
       argv.playwright ??
-      argv.eslint
+      argv.eslint ??
+      (argv.devtools || argv['vue-devtools'])
     ) === 'boolean'
 
   let targetDir = args[0]
@@ -138,6 +142,7 @@ async function init() {
     needsE2eTesting?: false | 'cypress' | 'nightwatch' | 'playwright'
     needsEslint?: boolean
     needsPrettier?: boolean
+    needsDevTools?: boolean
   } = {}
 
   try {
@@ -154,6 +159,7 @@ async function init() {
     // - Add Playwright for end-to-end testing?
     // - Add ESLint for code quality?
     // - Add Prettier for code formatting?
+    // - Add Vue DevTools extension for debugging? (experimental)
     result = await prompts(
       [
         {
@@ -285,6 +291,14 @@ async function init() {
           initial: false,
           active: language.defaultToggleOptions.active,
           inactive: language.defaultToggleOptions.inactive
+        },
+        {
+          name: 'needsDevTools',
+          type: () => (isFeatureFlagsUsed ? null : 'toggle'),
+          message: language.needsDevTools.message,
+          initial: false,
+          active: language.defaultToggleOptions.active,
+          inactive: language.defaultToggleOptions.inactive
         }
       ],
       {
@@ -305,12 +319,13 @@ async function init() {
     packageName = projectName ?? defaultProjectName,
     shouldOverwrite = argv.force,
     needsJsx = argv.jsx,
-    needsTypeScript = argv.typescript,
-    needsRouter = argv.router,
+    needsTypeScript = argv.ts || argv.typescript,
+    needsRouter = argv.router || argv['vue-router'],
     needsPinia = argv.pinia,
     needsVitest = argv.vitest || argv.tests,
     needsEslint = argv.eslint || argv['eslint-with-prettier'],
-    needsPrettier = argv['eslint-with-prettier']
+    needsPrettier = argv['eslint-with-prettier'],
+    needsDevTools = argv.devtools || argv['vue-devtools']
   } = result
 
   const { needsE2eTesting } = result
@@ -453,6 +468,10 @@ async function init() {
   if (needsPrettier) {
     render('config/prettier')
   }
+
+  if (needsDevTools) {
+    render('config/devtools')
+  }
   // Render code template.
   // prettier-ignore
   const codeTemplate =

locales/en-US.json

@@ -50,6 +50,9 @@
   "needsPrettier": {
     "message": "Add Prettier for code formatting?"
   },
+  "needsDevTools": {
+    "message": "Add Vue DevTools extension for debugging? (experimental)"
+  },
   "errors": {
     "operationCancelled": "Operation cancelled"
   },

locales/fr-FR.json

@@ -50,6 +50,9 @@
   "needsPrettier": {
     "message": "Ajouter Prettier pour le formatage du code\u00a0?"
   },
+  "needsDevTools": {
+    "message": "Ajouter l'extension Vue DevTools pour le débogage\u00a0? (expérimental)"
+  },
   "errors": {
     "operationCancelled": "Operation annulée"
   },

locales/tr-TR.json

@@ -50,6 +50,9 @@
   "needsPrettier": {
     "message": "Kod formatlama için Prettier eklensin mi?"
   },
+  "needsDevTools": {
+    "message": "Add Vue DevTools extension for debugging? (experimental)"
+  },
   "errors": {
     "operationCancelled": "İşlem iptal edildi"
   },

locales/zh-Hans.json

@@ -50,6 +50,9 @@
   "needsPrettier": {
     "message": "是否引入 Prettier 用于代码格式化？"
   },
+  "needsDevTools": {
+    "message": "Add Vue DevTools extension for debugging? (experimental)"
+  },
   "errors": {
     "operationCancelled": "操作取消"
   },

locales/zh-Hant.json

@@ -54,6 +54,9 @@
   "needsPrettier": {
     "message": "是否引入 Prettier 用於程式碼格式化？"
   },
+  "needsDevTools": {
+    "message": "Add Vue DevTools extension for debugging? (experimental)"
+  },
   "errors": {
     "operationCancelled": "操作取消"
   },