docs: use nuxt 3 and website theme

[Tahul]

❓ Type of change

• 👌 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:

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

📝 Checklist

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

resolves nuxt/nuxt#13571

[netlify]

✅ Deploy Preview for nuxt3-docs ready!

Name	Link
🔨 Latest commit	518a4b3
🔍 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!

[danielroe]

This looks great! ❤️

[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 🤔

[Tahul]

It should not flicker on client-side 🤔

nuxt-themes/docus@7ecc8e8

This is fixed in that commit.

[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/