Our development team successfully created an application using Vue 2 with class based components and TypeScript. Now, we are eager to transition to Vite for its numerous benefits.
After following a helpful guide on how to migrate from Vue CLI to Vite (which I highly recommend), we encountered some issues. The browser was unable to fetch "/src/main.js" from index.html. When attempting to use "/src/main.ts", it fetched the file but displayed errors indicating that Vuetify was not installed. We understand that .ts files are not readable by browsers, but after hours of debugging, we still faced challenges.
We also learned from Vuetify's documentation that "First party Vite support" is yet to be released.
My main question remains - is it feasible to integrate Vuetify into a Vite application?
Here are the relevant dependencies from our package.json:
"dependencies": {
"vue": "^2.6.12",
"vue-class-component": "^7.2.6",
"vue-property-decorator": "^9.1.2",
"vuetify": "^2.4.0",
},
"devDependencies": {
// List of dev dependencies
}
In our tsconfig.json file, we specified certain compiler options, including the necessary types:
{
"compilerOptions": {
// Compiler options here
"types": [
"webpack-env",
"vite/client"
],
For our vite.config.js, we configured the plugins and resolved aliases as required:
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"),
},
},
});
When attempting to import ".ts" in index.html, only an empty HTML page rendered with a "no vuetify" error indicator:
<script type="module" src="/src/main.ts"></script>