feat(nuxt3): create root component (nuxt#750)

sarwan920 · Oct 12, 2021 · 9cb9bb6 · 9cb9bb6
1 parent b35b111
commit 9cb9bb6
Show file tree

Hide file tree

Showing 35 changed files with 66 additions and 184 deletions.
diff --git a/docs/content/3.docs/1.usage/1.data-fetching.md b/docs/content/3.docs/1.usage/1.data-fetching.md
@@ -32,7 +32,7 @@ export default () => {
 }
 ```
 
-```vue [pages/index.vue]
+```vue [app.vue]
 <script setup>
 const { data } = await useAsyncData('count', () => $fetch('/api/count'))
 </script>
@@ -68,7 +68,7 @@ Available options:
 
 ### Example
 
-```vue [pages/index.vue]
+```vue [app.vue]
 <script setup>
 const { data } = await useFetch('/api/count')
 </script>

diff --git a/examples/async-data/pages/index.vue → examples/use-async-data/app.vue b/examples/async-data/pages/index.vue → examples/use-async-data/app.vue
diff --git a/examples/async-data/nuxt.config.ts → examples/use-async-data/nuxt.config.ts b/examples/async-data/nuxt.config.ts → examples/use-async-data/nuxt.config.ts
diff --git a/examples/pages/package.json → examples/use-async-data/package.json b/examples/pages/package.json → examples/use-async-data/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "example-pages",
+  "name": "example-use-async-data",
   "private": true,
   "devDependencies": {
     "nuxt3": "latest"

diff --git a/examples/async-data/server/api/hello.js → examples/use-async-data/server/api/hello.js b/examples/async-data/server/api/hello.js → examples/use-async-data/server/api/hello.js
diff --git a/examples/use-fetch/pages/index.vue → examples/use-fetch/app.vue b/examples/use-fetch/pages/index.vue → examples/use-fetch/app.vue
diff --git a/examples/meta/app.vue → examples/use-meta/app.vue b/examples/meta/app.vue → examples/use-meta/app.vue
diff --git a/examples/meta/nuxt.config.ts → examples/use-meta/nuxt.config.ts b/examples/meta/nuxt.config.ts → examples/use-meta/nuxt.config.ts
diff --git a/examples/meta/package.json → examples/use-meta/package.json b/examples/meta/package.json → examples/use-meta/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "example-meta",
+  "name": "example-use-meta",
   "private": true,
   "devDependencies": {
     "nuxt3": "latest"

diff --git a/examples/use-state/pages/index.vue → examples/use-state/app.vue b/examples/use-state/pages/index.vue → examples/use-state/app.vue
diff --git a/examples/wasm/package.json b/examples/wasm/package.json
diff --git a/examples/pages/app.vue → examples/with-pages/app.vue b/examples/pages/app.vue → examples/with-pages/app.vue
diff --git a/examples/pages/nuxt.config.ts → examples/with-pages/nuxt.config.ts b/examples/pages/nuxt.config.ts → examples/with-pages/nuxt.config.ts
diff --git a/examples/async-data/package.json → examples/with-pages/package.json b/examples/async-data/package.json → examples/with-pages/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "example-async-data",
+  "name": "example-with-pages",
   "private": true,
   "devDependencies": {
     "nuxt3": "latest"

diff --git a/examples/pages/pages/about.vue → examples/with-pages/pages/about.vue b/examples/pages/pages/about.vue → examples/with-pages/pages/about.vue
diff --git a/examples/pages/pages/catchall/[...id].vue → ...les/with-pages/pages/catchall/[...id].vue b/examples/pages/pages/catchall/[...id].vue → ...les/with-pages/pages/catchall/[...id].vue
diff --git a/examples/pages/pages/index.vue → examples/with-pages/pages/index.vue b/examples/pages/pages/index.vue → examples/with-pages/pages/index.vue
diff --git a/examples/with-vite/app.vue b/examples/with-vite/app.vue
diff --git a/examples/with-vite/nuxt.config.ts b/examples/with-vite/nuxt.config.ts
diff --git a/examples/with-vue-content-loader/package.json b/examples/with-vue-content-loader/package.json
diff --git a/examples/with-vue-content-loader/pages/index.vue b/examples/with-vue-content-loader/pages/index.vue
diff --git a/examples/with-vite/package.json → examples/with-wasm/package.json b/examples/with-vite/package.json → examples/with-wasm/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "example-with-vite",
+  "name": "example-with-wasm",
   "private": true,
   "devDependencies": {
     "nuxt3": "latest"

diff --git a/examples/wasm/server/api/hello.ts → examples/with-wasm/server/api/hello.ts b/examples/wasm/server/api/hello.ts → examples/with-wasm/server/api/hello.ts
diff --git a/examples/wasm/server/api/sample.wasm → examples/with-wasm/server/api/sample.wasm b/examples/wasm/server/api/sample.wasm → examples/with-wasm/server/api/sample.wasm
diff --git a/packages/kit/src/types/nuxt.ts b/packages/kit/src/types/nuxt.ts
@@ -49,7 +49,8 @@ export interface NuxtPlugin {
 }
 
 export interface NuxtApp {
-  main?: string
+  mainComponent?: string
+  rootComponent?: string
   dir: string
   extensions: string[]
   plugins: NuxtPlugin[]

diff --git a/packages/nuxt3/src/app/components/nuxt-root.vue b/packages/nuxt3/src/app/components/nuxt-root.vue
@@ -0,0 +1,5 @@
+<template>
+  <Suspense>
+    <App />
+  </Suspense>
+</template>
diff --git a/packages/nuxt3/src/app/entry.ts b/packages/nuxt3/src/app/entry.ts
@@ -4,15 +4,18 @@ import '#build/css'
 // @ts-ignore
 import _plugins from '#build/plugins'
 // @ts-ignore
-import App from '#build/app'
+import RootComponent from '#build/root-component.mjs'
+// @ts-ignore
+import AppComponent from '#build/app-component.mjs'
 
 let entry: Function
 
 const plugins = normalizePlugins(_plugins)
 
 if (process.server) {
   entry = async function createNuxtAppServer (ssrContext: CreateOptions['ssrContext'] = {}) {
-    const app = createApp(App)
+    const app = createApp(RootComponent)
+    app.component('App', AppComponent)
 
     const nuxt = createNuxtApp({ app, ssrContext })
 
@@ -35,7 +38,8 @@ if (process.client) {
 
   entry = async function initApp () {
     const isSSR = Boolean(window.__NUXT__?.serverRendered)
-    const app = isSSR ? createSSRApp(App) : createApp(App)
+    const app = isSSR ? createSSRApp(RootComponent) : createApp(RootComponent)
+    app.component('App', AppComponent)
 
     const nuxt = createNuxtApp({ app })
 

diff --git a/packages/nuxt3/src/app/templates.ts b/packages/nuxt3/src/app/templates.ts
@@ -8,10 +8,18 @@ type TemplateContext = {
   app: NuxtApp;
 }
 
-export const appTemplate = {
-  filename: 'app.mjs',
+// TODO: Use an alias
+export const appComponentTemplate = {
+  filename: 'app-component.mjs',
   getContents (ctx: TemplateContext) {
-    return `export { default } from '${ctx.app.main}'`
+    return `export { default } from '${ctx.app.mainComponent}'`
+  }
+}
+// TODO: Use an alias
+export const rootComponentTemplate = {
+  filename: 'root-component.mjs',
+  getContents (ctx: TemplateContext) {
+    return `export { default } from '${ctx.app.rootComponent}'`
   }
 }
 

diff --git a/packages/nuxt3/src/core/app.ts b/packages/nuxt3/src/core/app.ts
@@ -59,13 +59,16 @@ export async function resolveApp (nuxt: Nuxt, app: NuxtApp) {
   }
 
   // Resolve main (app.vue)
-  if (!app.main) {
-    app.main = tryResolvePath('~/App', resolveOptions) || tryResolvePath('~/app', resolveOptions)
+  if (!app.mainComponent) {
+    app.mainComponent = tryResolvePath('~/App', resolveOptions) || tryResolvePath('~/app', resolveOptions)
   }
-  if (!app.main) {
-    app.main = resolve(nuxt.options.appDir, 'components/nuxt-welcome.vue')
+  if (!app.mainComponent) {
+    app.mainComponent = resolve(nuxt.options.appDir, 'components/nuxt-welcome.vue')
   }
 
+  // Default root component
+  app.rootComponent = resolve(nuxt.options.appDir, 'components/nuxt-root.vue')
+
   // Resolve plugins
   app.plugins = [
     ...nuxt.options.plugins,

diff --git a/packages/nuxt3/src/core/builder.ts b/packages/nuxt3/src/core/builder.ts
@@ -15,7 +15,7 @@ export async function build (nuxt: Nuxt) {
     nuxt.hook('builder:watch', async (event, path) => {
       if (event !== 'change' && /app|plugins/i.test(path)) {
         if (path.match(/app/i)) {
-          app.main = null
+          app.mainComponent = null
         }
         await generateApp(nuxt, app)
       }

diff --git a/packages/nuxt3/src/pages/module.ts b/packages/nuxt3/src/pages/module.ts
@@ -23,10 +23,12 @@ export default defineNuxtModule({
       }
     })
 
-    // Add default layout for pages
     nuxt.hook('app:resolve', (app) => {
-      if (app.main.includes('nuxt-welcome')) {
-        app.main = resolve(runtimeDir, 'app.vue')
+      // Remove default root with Suspense
+      app.rootComponent = resolve(runtimeDir, 'root.vue')
+      // Add default layout for pages
+      if (app.mainComponent.includes('nuxt-welcome')) {
+        app.mainComponent = resolve(runtimeDir, 'app.vue')
       }
     })
 

diff --git a/packages/nuxt3/src/pages/runtime/root.vue b/packages/nuxt3/src/pages/runtime/root.vue
@@ -0,0 +1,3 @@
+<template>
+  <App />
+</template>
diff --git a/playground/app.vue b/playground/app.vue
@@ -1,5 +1,12 @@
 <template>
   <div>
-    <NuxtPage />
+    <img src="~/assets/logo.svg">
+    <br>
+    Hello Nuxt 3
   </div>
 </template>
+
+<script>
+export default defineNuxtComponent({
+})
+</script>
diff --git a/playground/pages/index.vue b/playground/pages/index.vue