Plans for @nuxtjs/composition-api

[danielroe]

Nuxt Bridge

With the beta release of Nuxt Bridge, we're looking to implement first-class Composition API within the core Nuxt libraries, as well as make available other enhancements from Nuxt 3.

Read more about Nuxt Bridge.

Migrating to Bridge

For that reason, we're currently recommending that users migrate from @nuxtjs/composition-api to Nuxt Bridge.

To start, follow the Nuxt Bridge migration guide. There is also a guide written specifically for @nuxtjs/composition-api which will provide details on how to migrate your existing composables to Nuxt Bridge.

You can hugely help us out as part of this process.

• if there's a feature or use-case missing, please mention it in this discussion.
• if there's a bug, please raise it in the bridge repository.

Roadmap

1. [current stage] recommend users migrate to Nuxt Bridge
2. collect feedback from users and improve Nuxt Bridge/Nuxt 3 composables
3. deprecate @nuxtjs/composition-api

Comparison table

Feature / Version	Nuxt 2	Nuxt Bridge	Nuxt 3
Vue	2	2	3
Stability	😊 Stable	😌 Semi-stable	😬 Unstable
Performance	🏎 Fast	✈️ Faster	🚀 Fastest
Nitro Engine	❌	✅	✅
ESM support	🌙 Partial	👍 Better	✅
TypeScript	☑️ Opt-in	🚧 Faster	✅
Composition API	❌	🚧 Partial	✅
Options API	✅	✅	✅
Components Auto Import	✅	✅	✅
<script setup> syntax	❌	🚧 Partial	✅
Auto Imports	❌	✅	✅
Webpack	4	4	5
Vite	⚠️ Partial	🚧 Partial	✅
Nuxi CLI	❌ Old	✅ nuxi	✅ nuxi
Static sites	✅	✅	🚧

[gnuletik]

I tried to upgrade to Nuxt Bridge recently and it broke compatibility on IE 11 because of syntax errors.
According to source maps, the syntax issues are from :

• import { ref } ... inside a component (from my project, I don't know why it's not transpiled with babel).
• Object spreading operator inside punnycode

I tried adding punnycode to build.transpile array inside nuxt.config.ts but that did not fixed the issue.
I'll keep using @nuxtjs/composition-api for now.

[mathe42]

Nuxt bridge, Nuxt 3, Vue 3 don't support IE 11

[gnuletik]

Nuxt 3 and Vue 3 does not supports IE 11.

But Nuxt Bridge is based on Vue 2 + vue-composition-api which both supports IE11.
So, I expected Nuxt Bridge to also supports IE11.
Do you have a doc reference stating that IE11 is not supported in Nuxt Bridge?

[ashx3s]

I've been trying to use nuxt bridge and would like to. However, it's been challenging to get it to work with storybook and tailwind (which are not supported based on the nuxt module list). When these modules play nice with nuxt bridge, I will be very happy to migrate.

[iBobik]

I've just tried to upgrade v-mapbox which now requires Composition API. Nuxt Bridge does not work with it, @nuxtjs/composition-api does.

[mathe42]

Is there a reason why useStatic is not in nuxt-bridge? Will there be something similar in nuxt3 (for static sites)? I use it quite often in my nuxt page.

[danielroe]

The plan is to handle that with mocking useAsyncData for statically generated routes.

[mathe42]

Thanks!

[sarayourfriend]

We've been periodically trying and re-trying Nuxt bridge upgrades over on WordPress/openverse-frontend to no avail.

WordPress/openverse-frontend#1292

Currently nuxi build fails with a rollup error about not being able to resolve pinia from node_modules/pinia/dist/pinia.mjs/dist/pinia.mjs

It's incredibly difficult to debug the Nuxt build chain as it is. Having to manage massive numbers of changes (removing tons of imports because it's not possible to disable auto-imports, changing various imports, etc) makes it feel impossible to achieve this upgrade.

Are there examples of large-ish Nuxt applications that have successfully been upgraded from @nuxtjs/composition-api to bridge that could be shared?

[sarayourfriend]

It'd be really nice to hear from a maintainer about this, otherwise I fear we'll have to start looking at alternatives for Nuxt to be able to take advantage of Vue 3 (like vite) or resign ourselves to being stuck on Nuxt 2... or attempt a full-rewrite with Nuxt 3... of course the incentive to do that is pretty low from my perspective if we have to face another upgrade like this one when Nuxt 4 rolls around 😞 Advice from Nuxt folks would be really helpful for understanding what the expectations of bridge are at this point and how large projects should proceed with trying to upgrade.

[danielroe]

@sarayourfriend So sorry for not replying sooner!

I appreciate your frustration, particularly as we've been focusing much more on Nuxt 3 than Bridge in the run-up to its stable release. However, speaking for myself I will be looking to spend much more time on Bridge once Nuxt 3 is stable. Feel free to ping me on Discord if you have any particular issues you're facing.

In general I would advise on upgrading to Bridge that you start with any optional feature flags disabled and iteratively update the code-base and enable them as you confirm each feature is working. That way, if something fails you know what the cause is.

[sarayourfriend]

Thanks for the reply and no worries. When we have time to try again I'll see about us hopping in the Discord to get assistance and then report back any findings here for other folks who may be running into similar issues. Hopefully then Openverse can be a helpful example for other semi-complex projects looking to upgrade to Bridge.

In general I would advise on upgrading to Bridge that you start with any optional feature flags disabled and iteratively update the code-base and enable them as you confirm each feature is working. That way, if something fails you know what the cause is.

We have tried this, unfortunately the biggest ones that we run into and take up the most time each upgrade attempt seem to be things that don't have flags. For example, the automatic imports of composables (which we do not want to use) doesn't appear to have any way to upgrade it.

In any case. We'll be in touch on Discord next time one of us attempts the upgrade. Thanks again for the response!

[Aareksio]

With Vue 2 EOL on the horizon, what are the plans on making Nuxt 2 to Nuxt 3 transition easier?

We encounter very similar issues to @sarayourfriend with our periodic attempts to update to Nuxt Bridge on relatively simple, but large application. The nuxt build chain is seemingly impossible to debug with criptic errors, that come from inside the bridge package itself, examples in spoiler.

Example errors

I am not looking for help with particular errors, but rather an upgrade path for Nuxt 2 projects that can not be easily rewritten from scratch. Maybe a migration guide to Vue 2.7 and a recommendation to stick with Vue 2 even after EOL is a viable strategy?

Ping for visibility: @danielroe

[wrz199306]

https://nuxt.com/docs/getting-started/bridge
Link failed

[7ochem]

I can find this page. Don't know if this is the same: https://nuxt.com/docs/bridge/overview

[neversaynever88]

Nuxt Bridge does not support definePageMeta

Hello everyone, I've been considering transitioning from Nuxt 2 to Nuxt 3 using Nuxt Bridge.
Most of the components have already been rewritten using the script setup syntax, and I don't have the ability to configure the config for each page, specifically to specify what type of middleware, layout, etc.
Is there any workaround for this, and when do the developers plan to add definePageMeta to the config?

[danielroe]

I'd welcome a PR to Bridge to enable this (or an issue to track) but implementing it wouldn't be straightforward owing to the underlying architecture of Nuxt 2.