CODEWITHSUNDEEP
typescriptvuejs2vuetify.jsvite
JozeV
JozeV

Reputation: 696

Add Vuetify 2 to vite project

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>

enter image description here

Upvotes: 15

Views: 20306

Answers (4)

Yue JIN
Yue JIN

Reputation: 2067

Install unplugin-vue-components.

npm install -D unplugin-vue-components

then add the plugin in vite.config.ts

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

defineConfig({
  plugins: [
     vue2(),
     Components({
        resolvers: [VuetifyResolver()],
     })
  ]
})

If you also use vuetify custom sass variable

defineConfig({
  plugins: [
    vue2(),
    Components({
      resolvers: [VuetifyResolver()],
    }),
  ],
  css: {
    // https://vitejs.dev/config/#css-preprocessoroptions
    preprocessorOptions: {
      sass: {
        additionalData: [
          // vuetify variable overrides
          '@import "@/styles/variables.scss"',
          '',
        ].join('\n'),
      },
    },
  },
})

You can refer to my starter template with Vite 3 + Vuetify 2 + Vue 2.7 It also includes TypeScript support and IntelliSense in Vuetify 2 components

https://github.com/kingyue737/vitify-admin

Upvotes: 8

sbernard
sbernard

Reputation: 784

I created repo where I migrate default vue2/vuetify2 official template from vue-cli to vite 5.

It used mainly :

  • @vitejs/plugin-vue2 and vue:^2.7.0 (this is minimal version required) for vue 2
  • unplugin-vue-components for vuetify 2

See : https://github.com/sbernard31/vuetify2-vite-template

Upvotes: 2

Logue
Logue

Reputation: 29

I've created startar template.

https://github.com/logue/vite-vue2-vuetify-ts-starter

Originally made for projects using vue-property-decorator, it also supports composition api.

If you want to access the vuetify function with the composition api, you can access it with useVuetify().

Upvotes: 2

SeanYin
SeanYin

Reputation: 328

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(),
      ],
    }),
  ]
})

Upvotes: 27

Related Questions