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

docs/content/2.guide/2.directory-structure/3.app.config.md

@@ -65,3 +65,15 @@ declare module '@nuxt/schema' {
 // It is always important to ensure you import/export something when augmenting a type
 export {}
 ```
+
+## Defining Custom Root Element
+
+By default, Nuxt will mount your app inside a `#__nuxt` container. You may choose to customize the root element by defining another selector in your app config.
+
+**Example:**
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  el: '#some-other-container'
+})
+```

packages/nuxt/src/app/entry.ts

@@ -11,6 +11,8 @@ import _plugins from '#build/plugins'
 import RootComponent from '#build/root-component.mjs'
 // @ts-ignore
 import AppComponent from '#build/app-component.mjs'
+// @ts-ignore
+import appConfig from '#build/app.config.mjs'
 
 if (!globalThis.$fetch) {
   // @ts-ignore
@@ -68,7 +70,8 @@ if (process.client) {
     try {
       await nuxt.hooks.callHook('app:created', vueApp)
       await nuxt.hooks.callHook('app:beforeMount', vueApp)
-      vueApp.mount('#__nuxt')
+      const el = appConfig.el ?? '#__nuxt'
+      vueApp.mount(el)
       await nuxt.hooks.callHook('app:mounted', vueApp)
       await nextTick()
     } catch (err) {