Vuetify

[Rogério Luiz Aques de Amorim]

I created a new project using vue-cli, installed vuetify plugin and vue-cli-plugin-vite. When I run the project with npm run vite, Vuetify components are not recognized.

The browser console is filled with error messages like this:

vue.runtime.esm.js:619 [Vue warn]: Unknown custom element: <v-app> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <App>
       <Root>

Here's my package.json

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "vite": "node ./bin/vite"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vuetify": "^2.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "sass": "^1.32.0",
    "sass-loader": "^10.0.0",
    "vue-cli-plugin-vite": "~0.3.3",
    "vue-cli-plugin-vuetify": "~2.3.0",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.7.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

[PENG Rui]

@n0n3br OK. I will figure it out.

[PENG Rui]

@n0n3br It is now the issue of this plugin, vuetify not support vite maybe vitejs/vite#305.
you can try some approch of that issue mentioned.
BTW. vue-cli-plugin-vuetify injected code import vue without .vue ext is not support (src/components/HelloWorld)
also vuetifyjs/vuetify#7927

[Rogério Luiz Aques de Amorim]

I managed to make it work importing individual components in the vuetify.js file in plugins folder, like this:

import Vue from "vue";

import Vuetify, { VApp, VMain, VRow, VCol } from "vuetify/lib";

Vue.use(Vuetify, { components: { VApp, VMain, VRow, VCol } });

export default new Vuetify({});

[Akayy]

@n0n3br It is now the issue of this plugin, vuetify not support vite maybe vitejs/vite#305.
you can try some approch of that issue mentioned.
BTW. vue-cli-plugin-vuetify injected code import vue without .vue ext is not support (src/components/HelloWorld)
also vuetifyjs/vuetify#7927

@n0n3br I just tried the plugin with Vuetify 3 Alpha, and it's working good... So, just have to wait for their major vuetify3 release...

Thanks again for this amazing plugin... It's a shame vue-cli has abandoned considering roll-up as an additional alternative (to webpack) for the user to choose vuejs/vue-cli#5098...

Looks like your plugin can fill up that gap to a great extend and help with eventual migration to Vite..

But, I wonder with vue-cli sticking to webpack, does that mean there won't be an Vite-based vue-cli and we have to manually setup everything (esp all the official vue-cli plugins like the testing related ones) when going with Vite? I was quite excited when Vite1 was primarily for Vue and seemed like the successor of vue-cli!

[PENG Rui]

@akkayy Thank you.

An eject command will be provided by this plugin to remove webpack deps and code and setup vite deps and config for the project. If you use vue-cli-plugin-vite, you use really vite and dont warried about it.

Also, vue-cli based on vite is the future, I will focus on(and push) it.

Recently first-class jest support for vite and some plugin like vite-plugin-chekcer and vite-plugin-eslint is out. It is much closer to the future(compat with vue-cli).

[Akayy]

Also, vue-cli based on vite is the future, I will focus on(and push) it.

Goosebumps :-) Thanks again!