Add Vuetify 2 to vite project

Question

My team developed application in Vue 2 with class based components and typescript.

Now, we want to migrate to Vite - because of all the advantages it carries.

I have followed this guide (which I can only recommend) https://vueschool.io/articles/vuejs-tutorials/how-to-migrate-from-vue-cli-to-vite/

In short - it don't work. Browser can't even fetch "/src/main.js" from index.html But if I put "/src/main.ts" it fetches it, but shows errors which indicates Vuetify is not even installed. I know .ts files are not readable by browser, I just tried it after 2 hours of debugging

Also, I saw in Vuetify documentation that "First party Vite support" is still to be released. https://vuetifyjs.com/en/introduction/roadmap/#in-development

My question is - is it even possible to add Vuetify in Vite application?

package.json (dependencies only)

  "dependencies": {
    "vue": "^2.6.12",
    "vue-class-component": "^7.2.6",
    "vue-property-decorator": "^9.1.2",
    "vuetify": "^2.4.0",
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vitejs/plugin-vue": "^1.6.1",
    "@vue/cli-plugin-typescript": "^4.5.15",
    "@vue/eslint-config-typescript": "^7.0.0",
    "eslint": "^8.9.0",
    "eslint-plugin-vue": "^8.5.0",
    "sass": "~1.32.0",
    "typescript": "~4.1.5",
    "vite": "^2.6.13",
    "vite-plugin-vue2": "^1.9.2",
    "vue-cli-plugin-vuetify": "^2.4.5",
    "vue-template-compiler": "^2.6.14",
    "vuetify-loader": "^1.7.0"
  },

tsconfig.json

{
  "compilerOptions": {
    // ...
    "target": "esnext",
    "module": "esnext",
    "isolatedModules": true,
    "useDefineForClassFields": true,
    "types": [
      "webpack-env",
      "vite/client"
    ],

vite.config.js

import { defineConfig } from "vite";
import { createVuePlugin as vue } from "vite-plugin-vue2";
const path = require("path");

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

empty html rendered in the top, and "no vuetify" error indicator when I put .ts import in index.html

<script type="module" src="/src/main.ts"></script>

Answer 1

There is support for Vuetify 2 link

first install the plugin

npm i unplugin-vue-components -D

Then in your vite.config.ts file:

import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'
import { VuetifyResolver } from 'unplugin-vue-components/resolvers';
import Components from 'unplugin-vue-components/vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    createVuePlugin(/* options */),
    Components({
      resolvers: [
        // Vuetify
        VuetifyResolver(),
      ],
    }),
  ]
})