feat(nuxt): define a custom root element inside app.config

[yassilah]

🔗 Linked issue

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Resolves nuxt/nuxt#15312 and nuxt/nuxt#15132.
There's probably a better place to customize the root element selector than app.config but it allowed for a very simple implementation and for retrieving that root container from wherever we want inside the app using useAppConfig(), which might be useful in some cases

📝 Checklist

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

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[netlify]

✅ Deploy Preview for nuxt3-docs ready!

Name	Link
🔨 Latest commit	46b558a
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt3-docs/deploys/636cd3ddf373a7000a0c0320
😎 Deploy Preview	https://deploy-preview-8604--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.

[HigherOrderLogic]

It would be nice if you also add an option to change the window.__NUXT__ script to something like window.__FOO__.

[manniL]

It would be nice if you also add an option to change the window.__NUXT__ script to something like window.__FOO__.

I don't think this will be feasible to maintain, see nuxt/nuxt#15132

[pi0]

Thanks for PR @yassilah ❤️ I've made a slightly different implementation that we are also able to change renderer behavior based on configuration: #8883

[yassilah]

that's much better, this way i don't even need a nitro plugin to render my custom div!