[FIXED] How to install and get started with Vuetify and Vue.js 3

Issue

Where can I find the new Vuetify version documentation that's compatible with Vue.js 3 and how do I install it and setup it using Vue cli :

In vue 2 we do :

vue create project-name

then :

vue add vuetify

How can we do that with Vue 3?

Solution

Before proceeding, it is important to note that this installation is intended primarily for testing purposes, and should not be considered for production applications.

You could follow the new documentation here and You could setup it as follows :

Create new vue project :

VUE CLI

vue create project-name

VITE

npm create vite project-name --template vue

Then change directory to the new created project to add vuetify

cd project-name

then

vue add vuetify

this changes the main.js file to :

import { createApp } from 'vue'
import vuetify from './plugins/vuetify'
import App from './App.vue'

const app = createApp(App)
app.use(vuetify)

app.mount('#app')

./plugins/vuetify

import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/lib/styles/main.sass'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/lib/components'
import * as directives from 'vuetify/lib/directives'

export default createVuetify({
  components,
  directives,
})

You could fork this repository to get started

Answered By - Boussadjra Brahim

Answer Checked By - Willingham (PHPFixing Volunteer)