docs: use nuxt 3 and docus based theme

[Tahul]

❓ Type of change

• [X] 👌 Enhancement (improving an existing functionality like performance)

📚 Description

Upgrade docs/ directory to use latest nuxtlabs/docus version.

This implies that the docs now runs on Nuxt 3.

TODO:

• [x] Re-add Algolia DocSearch
• [ ] Global review with @pi0 @danielroe @clemcode @Atinux

📝 Checklist

• [ ] I have linked an issue or discussion.
• [X] I have updated the documentation accordingly.

resolves https://github.com/nuxt/framework/issues/3951

[netlify[bot]]

✅ Deploy Preview for nuxt3-docs ready!

Name	Link
🔨 Latest commit	518a4b3cc4835b72856481ef9b8064932b2ee49f
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt3-docs/deploys/633d768e721d9c000848b53b
😎 Deploy Preview	https://deploy-preview-5479--nuxt3-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[pi0]

This is amazing! Thank you so much for working on this.

Same as previous PR, I think we shall move new docs to the theme so that can maintain it easier and also reuse for the translations repo. I think this way we can finally move forward from legacy nuxt 2 docs.

[Tahul]

I would love to get some help to get the deployment to work 😄

[Tahul]

@pi0 ; I updated the PR following your guidelines!

nuxt/nuxt3-docs now holds the theme for nuxt/framework/docs. 🙂

It is used via @docus/nuxt3-docs package but can be republished under the naming that fits you!

Will continue the work on Docus tomorrow closing the TODOs from here!

I would love to get this branch deployed, it should be doable using nuxi generate!

[Tahul]

@pi0 @danielroe ; this one is ready to be merged for me! (if that latest deployment passes 😄)

@Atinux @alexchopin might want to make a last review!

[atinux]

We need to fix these layout shifts issues on the icons top right and I feel something weird when changing layouts.

Browser metadata

Path:      /
Browser:   Chrome 102.0.5005.115 on Mac OS 10.15.7
Viewport:  1728 x 1000 @2x
Language:  en-GB
Cookies:   Enabled

Open in BrowserStack

Open Deploy Preview · Mark as Resolved

[danielroe]

I think the icon layout shift is due to how color mode icon is implemented - it flickers to three dots and back:

[atinux]

It should not flicker on client-side :thinking:

[Tahul]

It should not flicker on client-side 🤔

https://github.com/nuxtlabs/docus/commit/7ecc8e871803926c9c60af3227b97e9b301c4012

This is fixed in that commit.

[Tahul]

Just updated the PR, it now uses:

• RC.5
• Latest Docus (@nuxt-themes/docus)
• @nuxt/content v2.1 (edge release)

I think it is ready for another review @danielroe @pi0 😄

---

EDIT:

This issue seem to be raised from deployment:

6:30:18 AM: [error] [nitro] Rollup error: Could not resolve './style.59211af6.js' from .nuxt/dist/server/server.mjs
6:30:18 AM: [error] Could not resolve './style.59211af6.js' from .nuxt/dist/server/server.mjs
6:30:18 AM:   at error (node_modules/rollup/dist/es/shared/rollup.js:1858:30)
6:30:18 AM:   at ModuleLoader.handleResolveId (node_modules/rollup/dist/es/shared/rollup.js:22377:24)
6:30:18 AM:   at ModuleLoader.resolveDynamicImport (node_modules/rollup/dist/es/shared/rollup.js:22431:120)
6:30:18 AM:   at async node_modules/rollup/dist/es/shared/rollup.js:22326:32

I would love a quick hint on what is happening here, I've built other websites with same setup and did not had this issue. 😓

[pi0]

We tracked './style.59211af6.js' issue to @nuxtjs/algolia. Disabling it from theme layer fixes have to still check what is wrong.

[Tahul]

(@danielroe @pi0 ; I fixed the PR.. I think it might still need additional reviews from @Atinux @alexchopin ?)

[pi0]

Rebased and resolved merge conflicts. Seems we have new regressions form content or theme layer can you please check @Tahul @Atinux ? 🙏🏼

• /Users/pooya/Code/framework/docs/node_modules/@nuxt-themes/docus/components/prose/ProseThead.vue?vue&type=style&index=0&scoped=0885f9bc&lang.postcss:3:3: The u-border-gray-200 class does not exist. If u-border-gray-200 is a custom class, make sure it is defined within a @layer directive.
• / route shows 404

[atinux]

Once merged, we will need to update the deployments to point v3.nuxtjs.org to Vercel one.

[atinux]

Website can be tested on https://v3-wip.nuxtjs.org/