How to connect Vue 3 with Vuetify?

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-appvue 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

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 APIsimport { ref, reactive } from '@vue/composition-api'

Just be aware of the limitations of this method.

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