How to connect Vue 3 with Vuetify?

user_8800536 0
Viewed 35715

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?

Error: You cannot call "get" on a collection with no paths.

vuejs3 vuetify.js vue.js
5 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:

user_42494830
user_83496730

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.

user_28746550

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.

user_98996570
user_92570340
Related