How to use vuetify with vue 3.x?

[cookiengineer]

In vue3 the compiler has been split up into compiler-sfc, compiler-dom and compiler-ssr.

How can I use vuetify with vue3?

Is there a branch/tag that isn't published to NPM yet? The current next head is a bit out of date, and all current versions seem to be incompatible with vue3 as they all require vue-template-compiler v2.6.0 which isn't existing anymore in the new ecosystem.

[jacekkarczmarczyk]

Now you don't, it's not ready yet

https://github.com/vuetifyjs/vuetify/issues/11162#issuecomment-616353160

[forresthopkinsa]

Isn't Vue 3 supposed to be mostly backwards-compatible? It would be really nice to be able to use Vuetify with Vue 3 somehow, even if it's not very ergonomic yet

[mrts]

Vue 3.0.0 is officially out now, @forresthopkinsa can you perhaps do a quick experiment and report back how it went?

[forresthopkinsa]

@mrts I'll give it a shot this weekend

[byezy]

I ran up an app using the vue cli 4.5.6

vue create cli-app

(typescript, babel, vuex, router)

then tried to add vuetify in the usual way

vue add vuetify

and got this

byezy@acer:~/Projects/vue3/cli-app> vue add vuetify
vue add vuetify
 WARN  There are uncommitted changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? Yes

📦  Installing vue-cli-plugin-vuetify...

yarn add v1.22.5
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.1.3: The platform "linux" is incompatible with this module.
info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "linux" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 5 new dependencies.
info Direct dependencies
└─ vue-cli-plugin-vuetify@2.0.7
info All dependencies
├─ interpret@1.4.0
├─ null-loader@3.0.0
├─ rechoir@0.6.2
├─ shelljs@0.8.4
└─ vue-cli-plugin-vuetify@2.0.7
Done in 4.43s.
✔  Successfully installed plugin: vue-cli-plugin-vuetify

? Choose a preset: Default (recommended)

🚀  Invoking generator for vue-cli-plugin-vuetify...
 ERROR  Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.
Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.
    at Collection.get (/home/byezy/.config/yarn/global/node_modules/jscodeshift/src/Collection.js:213:13)
    at injectOptions (/home/byezy/.config/yarn/global/node_modules/@vue/cli/lib/util/codemods/injectOptions.js:15:6)
    at runTransformation (/home/byezy/.config/yarn/global/node_modules/vue-codemod/dist/src/run-transformation.js:61:17)
    at /home/byezy/.config/yarn/global/node_modules/@vue/cli/lib/Generator.js:290:23
    at Array.forEach (<anonymous>)
    at Generator.resolveFiles (/home/byezy/.config/yarn/global/node_modules/@vue/cli/lib/Generator.js:276:24)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async Generator.generate (/home/byezy/.config/yarn/global/node_modules/@vue/cli/lib/Generator.js:175:5)
    at async runGenerator (/home/byezy/.config/yarn/global/node_modules/@vue/cli/lib/invoke.js:111:3)
    at async invoke (/home/byezy/.config/yarn/global/node_modules/@vue/cli/lib/invoke.js:92:3)

beyond my pay grade unfortunately. Pretty excited about vue 3, hope these things can get ironed out and happy to help. Is it time to re-open this issue?

SORRY! *** This is NOT specific to Vuetify. Same message occurs when trying to add i18N, my apologies.

[stephenjason89]

@forresthopkinsa

@mrts I'll give it a shot this weekend

If you will be trying it with laravel 8 and vue 3.0 this might come in handy https://www.npmjs.com/package/laravel-mix-vue3

I hope you can get it working :)

[mathe42]

vuetify is beeing rewriten with the compositionapi so you need to wait until vuetify 3 is released! Also this is not the correct repro for asking this!

[FossPrime]

Tl;Dr:

No. Stop. Just don't.

https://stackoverflow.com/a/62887423/370238

Save your self the three days of hassle I spend trying to get this "backward compatible" thing to work... It's backward compatible possibly for the simple components... but not actually for anything that's even a tiny bit elaborate. I'm going back to Vue 2 while the samurais hash it out

[mrts]

It might not work currently, but it might become substantially easier after the "migration build" of Vue 3 with Vue 2 compatible behavior is released. It is still in the works, so let's wait and see how it goes.

[jacekkarczmarczyk]

it might become substantially easier

@mrts Vuetify 2 won't work with Vue 3 even after releasing migration build

Just:

No. Stop. Just don't.

[eru123]

I hope there will be a support for vuetify in vue 3 as soon as possible, I struggle for almost 3 days just to find a solution but still can't solve the problem. Is there any recommendation or alternative for vuetify supported in vue 3?

[mathe42]

@eru123 For my project (just started) I use WebComponents with the intention to replace them when vuetify3 is released. I use https://github.com/material-components/material-components-web-components .

In my project first visit load times doesn't matter so including all of them is no problem...

[eru123]

@mathe42 Thank you for suggestion, I'll try that.

[KaelWD]

Is there any recommendation

Use Vue 2, with vue-composition-api if you want.