I initialized a new, empty Vue application using Vue version 3. I then tried to add the plugin Vuetify
with the command vue add vuetify
, but received the following error. Any ideas on how to solve it?
7 Answers
Currently possible with Vuetify 3 Alpha:
Installation
In order for the installation to proceed correctly, vue-cli 4.0 is required. Further instructions are available at vue-cli. (check with vue -V
)
Once installed, generate a project with the following command using the vue-cli 4.0:
vue create my-app
When prompted, choose Vue 3 Preview
:
? Please pick a preset:
Default ([Vue 2] babel, eslint)
> Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Manually select features
It is recommended to commit or stash your changes at this point, in case you need to rollback the changes.
cd my-app
vue add vuetify
Once prompted, choose v3 (alpha):
? Choose a preset: (Use arrow keys)
Default (recommended)
Prototype (rapid development)
Configure (advanced)
> v3 (alpha)
Usage
With Vue 3.0, the initialization process for Vue apps (and by extension Vuetify) has changed. With the new createVuetify
method, the options passed to it have also changed. Please see the pages in the Features section of the documentation for further details.
Next, navigate to your project directory and add Vuetify to your project:
import { createApp } from "vue";
import vuetify from "./plugins/vuetify";
import App from "./App";
const app = createApp(App);
app.use(vuetify);
app.mount("#app");
Source:
As of July 2020 Vue 3 is unsupported by Vuetify 2.x. All components are being refactored for Vue 3 per Vuetify's task task list: https://www.notion.so/d107077314ca4d2896f0eeba49fe8a14?v=5cc7c08e9cc44021a7c86a20f189b0ba
-
3At this point in time, don't hold your breath - the above board shows 6/124 tasks completed.– avenmoreAug 25, 2020 at 11:46
-
Vuetify 3 is now in Alfa vuetifyjs.com/en/introduction/roadmap. Beta coming this month (February 2022). So I guess we could start holding the breath :) Anyway, I will start switching to it and Vue 3 Feb 19, 2022 at 13:17
While there is no Vuetify 3, I'd use Vue 2.x
with Vuetify 2.x
and install the Composition API as a package/plugin:
npm install @vue/composition-api
Then importing to your project (in main.js
):
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
And finally using it in your component:
// use the APIs
import { ref, reactive } from '@vue/composition-api'
Just be aware of the limitations of this method.
Vuetify is not currently compatible with Vue 3.
Given the number of breaking changes and implementation differences in Vue 3, the entire library needs to be rewritten.
As of Jan 2021, they are targetting a Quarter 1, 2021 release for an alpha version, but the average user shouldn't expect to see a release version until late in the year, possibly even early 2022.
Until then, there are other alternatives that are Vue 3 compatible, such as Prime Vue. I believe they have Material Design themes that can be connected and a decent number of components (albeit slightly lacking in the v-app style feature coordination).
EDIT: The Vuetify v3 BETA is now available with a full release likely in Summer/Autumn of '22.
You can try vue 3 with the alpha of vuetify https://next.vuetifyjs.com/
-
1Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.– Community BotDec 27, 2021 at 0:25
You Must Install Vuetify 3 using the command
npm i vuetify@3.0.0-beta.11
and add it using the instruction from https://next.vuetifyjs.com/en/
As of today Dec-4-2022 Vue 3 is released for Months, even vuetify@3.0.3 is released but the latest npm is'nt updated it is still in next even its not in beta anymore, also the vue-cli is in Maintenance mode and for a new Vue project they recommend using the Vite base install
so the best solution is to install it from npm with the latest release from GitHub like
npm i vuetify@^3.0.0
I hope they update it soon so you can install it without the version number