How to connect Vue 3 with Vuetify?

Question

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?

Answer 1

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:

• https://next.vuetifyjs.com/en/getting-started/installation/#installation
• https://next.vuetifyjs.com/en/introduction/roadmap

Answer 2

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

Answer 3

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.