Towards Vue 3 / Nuxt 3 migration roadmap

[vikiival]

Migration Roadmap click here

---

Is your feature request related to a problem?

Since we have Nuxt Bridge

• feat: migrated app to NuxtBridge 📦  #2677

we should leverage the latest features

• Pinia could be considered (Replace vuex with pinia/useState #4755)
• Composition API (Reduce using nuxt-property-decorator and use composition API #4750)
• blocker Migrate App to Vite #2692
• KodaDot@Next w/ Vue3 Vite and Nuxt3 #2081
• @nuxtjs/apollo next
• @nuxtjs/i18n Refactor: i18n module #3916

Nuxt 3 Docs
Nuxt Bridge
Those looking for chart

Ref

• Vue2 end of life December 31 2023 #4704

[yangwao]

Putting p5 as major release nuxt/vite by all hands call will be in June so it's not a hurry nor we are not gaining any edge having it.

Edit as June is around corner, would be nice to tackle this.

[preschian]

library/tools recommended for vue3: https://v3-migration.vuejs.org/recommendations.html#new-framework-level-recommendations

• New versions of Router, Devtools & test utils w/ Vue 3 support
• Build Toolchain: Vue CLI -> Vite
• State Management: Vuex -> Pinia
• IDE Support: Vetur -> Volar
• New command line TypeScript support: vue-tsc
• SSG: VuePress -> VitePress
• JSX: @vue/babel-preset-jsx -> @vue/babel-plugin-jsx

[vikiival]

IDE Support: Vetur -> Volar

I already switched to Volar

[preschian]

Some notes to help us migrate to vue3/nuxt3:

We need to reduce using nuxt-property-decorator first and use composition API instead. It will help us to migrate to vue3/nuxt3
nuxt-community/nuxt-property-decorator#83 (comment). at least for newer components
related: #2893

And I think we face this problem also nuxt-community/nuxt-property-decorator#83 (comment); most of the library is still not ready in nuxt3. And maybe some libs/modules are not compatible also in nuxt-bridge

[kkukelka]

@preschian
just as a sidenote:
afaik Class API is not going to be supported in Vue3/Nuxt3 at all. So we are kind of forced to rewrite everything to Composition API/Options API before we can upgrade to Nuxt3

[vikiival]

So we are kind of forced to rewrite everything to Composition API/Options API before we can upgrade to Nuxt3

[yangwao]

reduce using nuxt-property-decorator

• Reduce using nuxt-property-decorator and use composition API #4750

What's about libraries? @preschian

[roiLeo]

One year later, still in pipeline 🎢
Should be top priority.

[preschian]

One year later, still in pipeline 🎢 Should be top priority.

several days ago I'm trying to upgrade to nuxt3, but still got blocked by these modules

• nuxt-buefy
• @nuxtjs/apollo
• @nuxtjs/i18n

I think we need to wait for those modules until release a stable version. at least for apollo and i18n. or find the replacement that supports nuxt-bridge/nuxt3

meanwhile, upgrading to the latest @nuxt/bridge-edge also will break our builds

[yangwao]

• nuxt-buefy

what's issue with nuxt-buefy? jtommy (buefy author) can help us push things and happy to pay/sponsor repo as I bet we will be not only one stuck here. If you can get back to me with issue what's there we can put spotlight on that to remove one blocker

• https://github.com/buefy/nuxt-buefy/issues

[roiLeo]

several days ago I'm trying to upgrade to nuxt3, but still got blocked by these modules

Did you manage to build anything?

nuxt-buefy

This one IMO won't update in the upcoming month, we can try to wrap buefy config & import each components or replace buefy code with oruga-ui.
it may help rewritte some of the components If we can list what is still being used.

@nuxtjs/apollo

@nuxtjs/apollo next

@nuxtjs/i18n

i18n v8 is in beta

[preschian]

what's issue with nuxt-buefy?

this is the error https://app.warp.dev/block/JfAmbnq00a2rp8zaVWS53o

we can try to wrap buefy config & import each components or replace buefy code with oruga-ui

or replace completely buefy with oruga?

Did you manage to build anything?

not yet, and I didn't try with the next apollo, because still in the alpha release

[yangwao]

or replace completely buefy with oruga?

I think this is the goal.

[roiLeo]

I think this is the goal.

608 results in 149 files 👯‍♀️

[roiLeo]

migration roadmap

What needs to be done:

• finish Replace vuex with pinia/useState #4755, remove vuex & vuex-persist (&patch)
• replace Identicon implementation for Vue3 (ping me) Towards Vue 3 / Nuxt 3 migration roadmap #2690 (comment)
• replace all buefy components with Neo lib or oruga and remove buefy Goodbye Buefy #5852
• complete Reduce using nuxt-property-decorator and use composition API #4750
• Audit Vue3 compatibility packages Packages migration audit #6911
• upgrade to nuxt3, remove nuxt-bridge & edge
• upgrade i18 Refactor: i18n module #3916
• upgrade @nuxtjs/apollo
• upgrade nuxt3 plugins
• update layouts & page with vue3 composition (<NuxtLayout><NuxtPage /></NuxtLayout>)
• rename /static folder to /public
• profit!

Let me know if I'm missing a step.

[vikiival]

replace Identicon implementation for Vue3 (ping me)

The polkadot package should be usable for Vue3 too

[roiLeo]

The polkadot package should be usable for Vue3 too

polkadot-js/ui#747
&
https://stackblitz.com/edit/vue3-vite-starter-efpvnz?file=src%2FApp.vue,src%2Fcomponents%2FHelloWorld.vue

Uncaught TypeError: h2 is not a function

edi: nvm looks like @Gavin-Gong made a fix 👍

[stephenjason89]

several days ago I'm trying to upgrade to nuxt3, but still got blocked by these modules

Did you manage to build anything?

nuxt-buefy

This one IMO won't update in the upcoming month, we can try to wrap buefy config & import each components or replace buefy code with oruga-ui. it may help rewritte some of the components If we can list what is still being used.

@nuxtjs/apollo

@nuxtjs/apollo next

@nuxtjs/i18n

i18n v8 is in beta

Hello @roiLeo What's the issue you encounter with @nuxtjs/apollo?

[roiLeo]

Hello @roiLeo What's the issue you encounter with @nuxtjs/apollo?

I didn't encounter issue yet, we need to fix #4750 first.

[yangwao]

Continue to

• Nuxt3 - merging strategy #7034