Gradual Migrate to Nuxt3

[preschian]

Hi everyone! @kodadot/internal-dev I want to share my POC results for migrating our app to Nuxt3 within the proxy. We are currently in the middle of migrating to Nuxt3, and you can see the roadmap here: #2690 (comment). However, what if we could migrate our app to Nuxt3 directly using a shortcut?

One challenge I faced with the current migration is that I am not sure if the upgraded dependencies are compatible with nuxt-bridge/nuxt3, and there is a possibility that it may not go smoothly. Last time I checked, some dependencies were not supported on nuxt-bridge.

Based on this documentation: https://nuxt.com/docs/bridge/overview#install-nuxt-bridge, I assumed that nuxt-bridge should be using the latest version. However, we are stuck in the current version, and it will throw errors in the latest version (https://github.com/preschian/nft-gallery/pull/86/files#diff-65d5d69bb59dcc81ad971719549cdee5018f0a240add8b7ef5c65bee3e73dae0R29). I have already tried testing with enable/disable auto-import, but it was unsuccessful.

So, last week, I tried to find another workaround to deliver Nuxt3. I tested a small POC to proxy our app with Nuxt3. You can test it here:

• Visit this link: https://preschian.xyz/rmrk/explore/items?listed=true
• After logging in, click "View Profile" on the sidebar.

Alternatively, you can directly visit this link: https://preschian.xyz/rmrk/u/CocvTCrHM2bcLGNFTVGd71AuvVPFVPbJknDiLJAmNEAfLzi

The /rmrk/u/* path has been proxied to use the Nuxt3 app. The other routes still use Nuxt2.

Here is the code:

• Proxy: https://github.com/preschian/nft-gallery-mirror/blob/feat/gradual-nuxt3/libs/proxy-nuxt3/src/index.ts
• Nuxt3: [https://github.com/preschian/nft-gallery-mirror/blob/feat/gradual-nuxt3/apps/marketplace/pages/[prefix]/u/[address].vue](https://github.com/preschian/nft-gallery-mirror/blob/feat/gradual-nuxt3/apps/marketplace/pages/%5Bprefix%5D/u/%5Baddress%5D.vue)

To do this:

• Nuxt3. Just create a normal project from Nuxt3 https://github.com/preschian/nft-gallery-mirror/blob/ef43c238898692deffa73e753fa2cf88484d18bb/apps/marketplace/package.json#L17
  • Deploy it with a new domain
• Proxy. For the proxy, I’m still using cf-workers to accomplish this
  • First, we need to define which routes should be rendered to our Nuxt3 app. It can be defined here https://github.com/preschian/nft-gallery-mirror/blob/feat/gradual-nuxt3/libs/proxy-nuxt3/wrangler.toml#L4
  • Second. Since we deploy Nuxt3 separately, it will have its own domain. So, put the domain here https://github.com/preschian/nft-gallery-mirror/blob/ef43c238898692deffa73e753fa2cf88484d18bb/libs/proxy-nuxt3/src/index.ts#L14

Pros:

• We can start using Nuxt3 directly (build the app with Vite).
• Enable SSR from the start (it means we can drop prerendering stuff in cf-workers if the page replacement is ready to deploy).
  • In my experience, an SSR page is easier to improve core web vitals instead of a CSR because we already sent less JS to the client. The challenge in SSR for core web vitals score is the [TTFB](https://web.dev/ttfb/) response from the server itself.

Cons:

• We need to create our components from scratch (headers, search bar, sidebar, footer, etc.).

Limitations

1. Issue with Using pnpm Workspaces

Because nft-gallery is the primary repository, attempting to put a Nuxt3 app in the same repository would conflict with the nuxi content if they were placed alongside the Nuxt2 app.

Workarounds:

• The Nuxt3 app was still placed in nft-gallery without pnpm workspaces, which requires installing dependencies using npm install.
• Even with npm install, it is still necessary to remove node_modules in the root folders before development, using rm -rf ../../node_modules.

Alternative solution:

• Create a new repository for Nuxt3.

2. Issue with Deploying Multiple Pages in Cloudflare Pages Using a Single Repository

Unfortunately not supported. ref: https://community.cloudflare.com/t/several-pages-from-same-repo/434705

Workarounds:

• A mirroring repository was created to connect and deploy Nuxt3 to Cloudflare Pages: feat: gradually migrate nuxt 3 preschian/nft-gallery-mirror#1
• Deploy Nuxt3 with wrangler cli. Need to pass some ENV first. [Commands](https://github.com/preschian/nft-gallery/blob/f1f43e62f296eccda9d82cd22a8958a9353b0060/apps/marketplace/package.json#L10):
  • NITRO_PRESET=cloudflare-pages
  • NUXT_APP_CDN_URL=https://marketplace-nuxt3.pages.dev/ npm run build
  • wrangler pages publish dist/

Alternative solution:

• Deploy Nuxt3 with wrangler cli. This method was attempted but was still unsuccessful in deploying the SSR app.
• Create a new repository for Nuxt3.

3. Unable to use <NuxtLink />

By default, <NuxtLink /> navigates to the page on the client side. However, our proxy is only on the server side with cf-workers.

Workarounds:

• In Nuxt2, use <a href="/page" /> instead of <NuxtLink to="/page" /> to navigate to the Nuxt3 app.

Alternative solution:

• It would be better to have a prop for <NuxtLink /> that can disable client-side navigation.

4. Unable to use public folder or compiled css (yet)

Workarounds:

• Use full path assets: <img src="<https://domain.xyz/public/logo.svg>" />
• set NUXT_APP_CDN_URL

Alternative solution:

• Upload assets into their own CDN and then use the NuxtImage module for images: https://image.nuxtjs.org/providers/cloudflare

Please note, there might be another limitation that is still not discovered yet.

Alternative Methods

1. Without Proxy

We can use another subdomain for the Nuxt3 app, for example next.kodadot.xyz. However, we should release it to the user only once most of the crucial pages are ready.

Pros: Smaller limitations.
Cons: Takes longer to deliver to the user.

Document updates:

• deploy Nuxt3 with wrangler cli
• set NUXT_APP_CDN_URL
• add another alternative without proxy

[preschian]

let me know if this is compelling or not. I added another demo related to this content #6419. I think that content is quite simple to test as experiment in this POC

demo URL: https://preschian.xyz/blog
code:

• proxy: https://github.com/preschian/nft-gallery/tree/feat/gradual-nuxt3/libs/proxy-nuxt3
• nuxt3: https://github.com/preschian/nft-gallery/tree/feat/gradual-nuxt3/apps/marketplace

open graph works:

[vikiival]

Hello @preschian,

Thanks for the deep dive in to the topic and possible solution of using proxy.
One question that comes to my mind:

• What is blocking for use to come fully to Nuxt3 (without some hacky solution)?

I am aware that we not longer, use vuex, majority of components are written in composition api

[preschian]

Using Nuxt Bridge, you can make sure your project is (almost) ready for Nuxt 3 and have the best developer experience without needing a major rewrite or risk breaking changes.

at first, I want to believe this part

I am aware that we not longer, use vuex, majority of components are written in composition api

and that's why we already working hard to migrate some of these sections (remove vuex, buefy, etc). but, until now, some stuff is more hacky than I expected when migrating to nuxt-bridge (I hope I'm wrong tho)

Modules Compatibility with the latest version of nuxt-bridge

One challenge I faced with the current migration is that I am not sure if the upgraded dependencies are compatible with nuxt-bridge/nuxt3, and there is a possibility that it may not go smoothly. Last time I checked, some dependencies were not supported on nuxt-bridge.

Based on this documentation: nuxt.com/docs/bridge/overview#install-nuxt-bridge, I assumed that nuxt-bridge should be using the latest version. However, we are stuck in the current version, and it will throw errors in the latest version (preschian/nft-gallery#86 (files)). I have already tried testing with enable/disable auto-import, but it was unsuccessful.

already put some reasons in this section

for example, in this PR, I'm trying to update nuxt@2x and nuxt-bridge to the latest version. but, the build was throwing an error related to @nuxtjs/color-mode. this part is confusing for me because the readme says compatible with nuxt-bridge. I decided to skip that error by removing that module. now, the build was fine locally and in the actions. but, the page is not rendering a single component at all 😵‍💫

How do we migrate @nuxtjs/apollo modules?

this is my personal opinion, I'm not a fan of using a library that is still in the alpha/rc version. I tend to find alternative packages that already have a stable version

How do we enable SSR mode?

in this PR I'm trying to update nuxt-bridge to the latest version because it's come up with the latest version of nitropack. it needed to build SSR on cloudflare-pages / netlify. but, for now, that PR only renders a blank page

Conclusion

in the end, I can't measure/predict how long we need to migrate that from nuxt-2 -> nuxt-bridge -> nuxt-3. so many errors when migrating to the latest nuxt-bridge

so I come up with this POC. In this POC, I can use nuxt-3 earlier, and less hacky

a little annoying part is on development mode when we want to put our nuxt-3 app alongside our nuxt-2. but, we can eliminate this annoying part by putting nuxt-3 in a separate repository. Or, create a new branch where the new branch doesn't have nuxt-2, replaced with nuxt-3

why use a proxy? because it can deliver to the user and gather feedback faster. for example:

• we can deliver pages one by one. what we need first is a proper header and footer
• and then, prepare /blog page using nuxt-3
• deliver it to the user
• monitoring the pages, is there any major issue or not with mixing nuxt-2 and nuxt-3 in the same domain
• if fixable, fix it and then can continue using this method
• if not fixable, what we can learn from it and then find another alternative

I also put another alternative if we want to avoid proxy. but, I think it will take longer to deliver to the user. this is similar to what singular did in the past with RMRKv1

• need to prepare crucial pages first (homepage, gallery-detail, collection-detail, minting)
• pointing kodadot.xyz to nuxt-3
• pointing old.kodadot.xyz to nuxt-2

[preschian]

I think we can close this POC for now. The problem was we couldn't use the latest nuxt-bridge to make a smooth migration

1. In this POC, gradually migrate directly to nuxt3 by using a proxy
2. @roiLeo currently directly migrates to nuxt3 in one big-bang PR. Let's watch live-action by him in this PR: 🔧 wip: nuxt3 #6917

[roiLeo]