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

Question

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?

Answer 1

Update 2023

Just do :

npm init vuetify

or

pnpm create vuetify

Old

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

Create new vue project :

************************* VUE CLI ****************************

vue create project-name

Then change directory to the new created project to add vuetify

cd project-name

then

vue add vuetify

Choose the vuetify 3 preset Vuetify 3 - Vue CLI (preview 3) :

? Choose a preset:
  Vuetify 2 - Configure Vue CLI (advanced)
  Vuetify 2 - Vue CLI (recommended)
  Vuetify 2 - Prototype (rapid development)
  Vuetify 3 - Vite (preview)
❯ Vuetify 3 - Vue CLI (preview 3)

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,
})

************************* VITE ****************************

Create Vue 3 project following these commands :

npm init vue@latest

Then answer the different prompts :

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

finally install vuetify 3 and @mdi/font:

npm i vuetify@next @mdi/font

and change the main.js as above.

You could fork this repository to get started