build: move from Vue CLI to Vite

.prettierrc.js

@@ -1,5 +1,4 @@
 module.exports = {
-  // jsxBracketSameLine: true,
   semi: false,
   trailingComma: "all",
   singleQuote: true,

babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  presets: ['@vue/cli-plugin-babel/preset'],
-}

cypress.json

@@ -1,3 +0,0 @@
-{
-  "pluginsFile": "tests/e2e/plugins/index.js"
-}

index.html

@@ -44,7 +44,8 @@
     <noscript>
       <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
-      <div id="app"></div>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
     <!-- built files will be auto injected -->
   </body>
 </html>

jest.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  preset: '@vue/cli-plugin-unit-jest',
-}

jsconfig.json

@@ -1,19 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "module": "esnext",
-    "baseUrl": "./",
-    "moduleResolution": "node",
-    "paths": {
-      "@/*": [
-        "src/*"
-      ]
-    },
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ]
-  }
-}

package.json

@@ -12,11 +12,9 @@
   "license": "MIT",
   "author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
   "scripts": {
-    "build": "vue-cli-service build",
+    "dev": "vite",
-    "lint": "vue-cli-service lint",
+    "build": "vite build",
-    "serve": "vue-cli-service serve",
+    "preview": "vite preview"
-    "test:e2e": "vue-cli-service test:e2e",
-    "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
     "@coreui/chartjs": "^3.1.2",
@@ -26,32 +24,13 @@
     "@coreui/utils": "^2.0.2",
     "@coreui/vue": "^4.9.0-beta.1",
     "@coreui/vue-chartjs": "2.1.0",
-    "core-js": "^3.31.0",
     "vue": "^3.3.4",
     "vue-router": "^4.2.2",
     "vuex": "^4.1.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.5",
+    "@vitejs/plugin-vue": "^4.2.3",
-    "@babel/eslint-parser": "^7.22.5",
+    "sass": "^1.68.0",
-    "@vue/cli-plugin-babel": "~5.0.8",
+    "vite": "^4.4.5"
-    "@vue/cli-plugin-e2e-cypress": "~5.0.8",
-    "@vue/cli-plugin-eslint": "~5.0.8",
-    "@vue/cli-plugin-router": "~5.0.8",
-    "@vue/cli-plugin-unit-jest": "~5.0.8",
-    "@vue/cli-plugin-vuex": "~5.0.8",
-    "@vue/cli-service": "~5.0.8",
-    "@vue/test-utils": "^2.3.2",
-    "@vue/vue3-jest": "^29.2.4",
-    "babel-jest": "^29.5.0",
-    "cypress": "^12.14.0",
-    "eslint": "^8.42.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-vue": "^9.14.1",
-    "jest": "^29.5.0",
-    "prettier": "^2.8.8",
-    "sass": "^1.63.3",
-    "sass-loader": "^13.3.2"
   }
 }

src/App.vue

@@ -15,7 +15,7 @@ export default {
 
     onBeforeMount(() => {
       const urlParams = new URLSearchParams(window.location.href.split('?')[1])
-      const theme = urlParams.get('theme').match(/^[A-Za-z0-9\s]+/)[0]
+      const theme = urlParams.get('theme') && urlParams.get('theme').match(/^[A-Za-z0-9\s]+/)[0]
       if (theme) {
         setColorMode(theme)
         return

tests/e2e/.eslintrc.js

@@ -1,10 +0,0 @@
-module.exports = {
-  plugins: ['cypress'],
-  env: {
-    mocha: true,
-    'cypress/globals': true,
-  },
-  rules: {
-    strict: 'off',
-  },
-}

tests/e2e/plugins/index.js

@@ -1,25 +0,0 @@
-/* eslint-disable arrow-body-style */
-// https://docs.cypress.io/guides/guides/plugins-guide.html
-
-// if you need a custom webpack configuration you can uncomment the following import
-// and then use the `file:preprocessor` event
-// as explained in the cypress docs
-// https://docs.cypress.io/api/plugins/preprocessors-api.html#Examples
-
-// /* eslint-disable import/no-extraneous-dependencies, global-require */
-// const webpack = require('@cypress/webpack-preprocessor')
-
-module.exports = (on, config) => {
-  // on('file:preprocessor', webpack({
-  //  webpackOptions: require('@vue/cli-service/webpack.config'),
-  //  watchOptions: {}
-  // }))
-
-  return Object.assign({}, config, {
-    fixturesFolder: 'tests/e2e/fixtures',
-    integrationFolder: 'tests/e2e/specs',
-    screenshotsFolder: 'tests/e2e/screenshots',
-    videosFolder: 'tests/e2e/videos',
-    supportFile: 'tests/e2e/support/index.js',
-  })
-}

tests/e2e/specs/test.js

@@ -1,8 +0,0 @@
-// https://docs.cypress.io/api/introduction/api.html
-
-describe('My First Test', () => {
-  it('Visits the app root url', () => {
-    cy.visit('/')
-    cy.contains('h1', 'Welcome to Your Vue.js App')
-  })
-})

tests/e2e/support/commands.js

@@ -1,25 +0,0 @@
-// ***********************************************
-// This example commands.js shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add("login", (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This is will overwrite an existing command --
-// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

tests/e2e/support/index.js

@@ -1,20 +0,0 @@
-// ***********************************************************
-// This example support/index.js is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import './commands'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')

tests/unit/example.spec.js

@@ -1,12 +0,0 @@
-import { shallowMount } from '@vue/test-utils'
-import HelloWorld from '@/components/HelloWorld.vue'
-
-describe('HelloWorld.vue', () => {
-  it('renders props.msg when passed', () => {
-    const msg = 'new message'
-    const wrapper = shallowMount(HelloWorld, {
-      props: { msg },
-    })
-    expect(wrapper.text()).toMatch(msg)
-  })
-})

vite.config.js

@@ -0,0 +1,50 @@
+import { defineConfig, loadEnv } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import path from 'node:path'
+
+export default defineConfig(({ mode }) => {
+  // Load .env
+  const env = loadEnv(mode, process.cwd(), '')
+  process.env = { ...process.env, ...env }
+
+  return {
+    plugins: [vue()],
+    resolve: {
+      alias: [
+        // webpack path resolve to vitejs
+        {
+          find: /^~(.*)$/,
+          replacement: '$1',
+        },
+        {
+          find: '@/',
+          replacement: `${path.resolve(__dirname, 'src')}/`,
+        },
+        {
+          find: '@',
+          replacement: path.resolve(__dirname, '/src'),
+        },
+      ],
+      extensions: [
+        '.mjs',
+        '.js',
+        '.ts',
+        '.jsx',
+        '.tsx',
+        '.json',
+        '.vue',
+        '.scss',
+      ],
+    },
+    server: {
+      port: 3000,
+      proxy: {
+        // https://vitejs.dev/config/server-options.html
+      },
+    },
+    define: {
+      // vitejs does not support process.env so we have to redefine it
+      'process.env': process.env,
+    },
+  }
+})

vue.config.js

@@ -1,4 +0,0 @@
-const { defineConfig } = require('@vue/cli-service')
-module.exports = defineConfig({
-  transpileDependencies: true,
-})