Merge branch 'main' into test/bridge-vite

docs/content/3.docs/2.directory-structure/10.plugins.md

@@ -51,23 +51,20 @@ If you want to use Vue plugins, like [vue-gtag](https://github.com/MatteoGabriel
 First install the plugin you want.
 
 ```bash
-yarn add --dev vue-gtag
+yarn add --dev vue-gtag-next
 ```
 
 Then create a plugin file `plugins/vue-gtag.client.js`.
 
 ```ts
 import { defineNuxtPlugin } from "#app";
-import VueGtag from "vue-gtag";
+import VueGtag from "vue-gtag-next";
 
 export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.vueApp.use(VueGtag, {
-    config: {
-      id: "GA_MEASUREMENT_ID",
-      params: {
-        anonymize_ip: true,
-      },
-    },
+  nuxtApp.vue.use(VueGtag, {
+    property: {
+      id: "GA_MEASUREMENT_ID"
+    }
   });
 });
 ```

docs/content/3.docs/2.directory-structure/5.composables.md

@@ -24,9 +24,9 @@ Example: (using default export)
 ```js [composables/use-foo.ts or composables/useFoo.ts]
 import { useState } from '#app'
 
-// It will be available as useFoo()
+// It will be available as useFoo() (pascalCase of file name without extension)
 export default function () {
-  return 'foo'
+  return 'bar'
 }
 ```
 

docs/content/3.docs/2.directory-structure/6.layouts.md

@@ -59,3 +59,45 @@ export default {
 };
 </script>
 ```
+
+### Example: using with `<script setup>`
+
+If you are utilizing Vue `<script setup>` [compile-time syntactic sugar](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup), you can use a secondary `<script>` tag to set `layout` options as needed.
+
+::alert{type=info}
+Learn more about [`<script setup>` and `<script>` tags co-existing](https://v3.vuejs.org/api/sfc-script-setup.html#usage-alongside-normal-script) in the Vue docs.
+::
+
+Assuming this directory structure:
+
+```bash
+-| layouts/
+---| custom.vue
+-| pages/
+---| my-page.vue
+```
+
+And this `custom.vue` layout:
+
+```vue
+<template>
+  <div>
+    Some shared layout content:
+    <slot />
+  </div>
+</template>
+```
+
+You can set a page layout in `my-page.vue` — alongside the `<script setup>` tag — like this:
+
+```vue
+<script>
+export default {
+  layout: "custom",
+};
+</script>
+
+<script setup>
+// your setup script
+</script>
+```

docs/content/3.docs/2.directory-structure/9.pages.md

@@ -37,3 +37,64 @@ Given the example above, you can access group/id within your component via the `
   {{ $route.params.id }}
 </template>
 ```
+
+## Nested Routes
+
+We provide a semantic alias for `RouterView`, the `NuxtChild` component, for displaying the children components of a [nested route](https://next.router.vuejs.org/guide/essentials/nested-routes.html).
+
+### Example
+
+```bash
+-| pages/
+---| parent/
+------| child.vue
+---| parent.vue
+```
+
+To display the `child.vue` component, simply put the `<NuxtChild>` component inside the `parent.vue` component:
+
+```html{}[pages/parent/child.vue]
+<template>
+  <div>
+    <h3>child.vue</h3>
+  </div>
+</template>
+```
+
+```html{}[pages/parent.vue]
+<template>
+  <div>
+    <h1>parent.vue</h1>
+    <NuxtChild />
+  </div>
+</template>
+
+<!-- output -->
+<template>
+  <div>
+    <h1>parent.vue</h1>
+    <div>
+      <h3>child.vue</h3>
+    </div>
+  </div>
+</template>
+```
+
+The example file tree above should generate these routes:
+
+```ts
+[
+  {
+    path: '/parent',
+    component: '~/pages/parent.vue',
+    name: 'parent',
+    children: [
+      {
+        path: 'child',
+        component: '~/pages/parent/child.vue',
+        name: 'parent-child'
+      }
+    ]
+  }
+]
+```

docs/yarn.lock

@@ -6501,10 +6501,10 @@ jiti@^1.10.1, jiti@^1.11.0, jiti@^1.12.5, jiti@^1.12.6, jiti@^1.9.1, jiti@^1.9.2
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.12.6.tgz#8884d53a10bd571e0e85787994d97cfcc48ac6f9"
   integrity sha512-drQ/qnYriF9KiU47sRF0rTvfQmJo4JEmFMhCk2SJIsUj+hGnQaxkwaKfyvK9KenX20JNTQmVfJOz7VWe0cSntw==
 
-jiti@^1.12.7:
-  version "1.12.7"
-  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.12.7.tgz#745074d5a6f88c29152b32a99f4a2de23bd22a3f"
-  integrity sha512-2v5iYsJp5l7iX6ettW/hD7A9qZtsib3gMBfxbQxASszzOpZ0dFZBZAUQGKKIQ780XGR3sGEp1L/8t1JyyPq5Fg==
+jiti@^1.12.9:
+  version "1.12.9"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.12.9.tgz#2ce45b265cfc8dc91ebd70a5204807cf915291bc"
+  integrity sha512-TdcJywkQtcwLxogc4rSMAi479G2eDPzfW0fLySks7TPhgZZ4s/tM6stnzayIh3gS/db3zExWJyUx4cNWrwAmoQ==
 
 joycon@^3.0.1:
   version "3.0.1"
@@ -6578,7 +6578,7 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
-json5@^2.1.1, json5@^2.1.2, json5@^2.2.0:
+json5@^2.1.1, json5@^2.1.2:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.0.tgz#2dfefe720c6ba525d9ebd909950f0515316c89a3"
   integrity sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==
@@ -7345,12 +7345,10 @@ mlly@^0.2.5:
   dependencies:
     import-meta-resolve "^1.1.1"
 
-mlly@^0.2.6:
-  version "0.2.6"
-  resolved "https://registry.yarnpkg.com/mlly/-/mlly-0.2.6.tgz#6becb976c726ad9b4432662b7f8eb3e8d74b449c"
-  integrity sha512-Wzv+ONQTQLsEZ6/Hyp7yc+EpOv52DrPGN497S3ZN66OuYdJkwo9BoVTM+kefNfGRzTKu2qmW4vLp5CbX9HfoYQ==
-  dependencies:
-    import-meta-resolve "^1.1.1"
+mlly@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/mlly/-/mlly-0.3.0.tgz#5705b2a95551d79ad33feedc046daf7c6d079748"
+  integrity sha512-6XphOVPsnIzuqNYlcZPMJhaMDDdrEgbLUlA7BPis8O0kkLPbOVA8GcXGeICGcnDotCtTkxAEWBT+FlhywrXTmg==
 
 move-concurrently@^1.0.1:
   version "1.0.1"
@@ -8172,12 +8170,12 @@ pkg-dir@^3.0.0:
   dependencies:
     find-up "^3.0.0"
 
-pkg-types@^0.1.3:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/pkg-types/-/pkg-types-0.1.5.tgz#8e1740454561cebcb1037b728148f6d7b9442f28"
-  integrity sha512-EyZ8oKXlLv6YhW/6dbU25ei2MVr8yRd6NPh5CLH+vtTHUMKsKwYfpu02BszZYXGSn+LGc9dCVYWmc37vDWuJQQ==
+pkg-types@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/pkg-types/-/pkg-types-0.2.1.tgz#41a22a6689c1fb3df5434856cf158598342701b8"
+  integrity sha512-RlrGelHSS2yPeLT9NMuMIfpKS7+gRAhuXi+PexBeToKjbRkmu+E+HdgDY2ZKU1RDirk5w9WuViEhOufELtAnug==
   dependencies:
-    json5 "^2.2.0"
+    jsonc-parser "^3.0.0"
 
 plausible-tracker@^0.3.1:
   version "0.3.1"

examples/with-layouts/layouts/other.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    Other
+    Other layout
     <slot />
   </div>
 </template>

examples/with-pages/pages/parent.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
     Parent
-    <RouterView />
+    <NuxtChild />
   </div>
 </template>

package.json

@@ -27,7 +27,7 @@
   },
   "resolutions": {
     "nuxt3": "workspace:./packages/nuxt3",
-    "unbuild": "^0.5.8",
+    "unbuild": "^0.5.10",
     "jiti": "^1.12.9"
   },
   "devDependencies": {
@@ -51,7 +51,7 @@
     "object-hash": "^2.2.0",
     "pathe": "^0.2.0",
     "typescript": "^4.4.4",
-    "unbuild": "^0.5.8",
+    "unbuild": "^0.5.10",
     "vue-router": "next"
   },
   "packageManager": "yarn@3.0.2",

packages/bridge/src/runtime/capi.legacy.mjs

@@ -77,7 +77,7 @@ const warnOnce = (id, message) => {
 warnOnce('import', `\`@nuxtjs/composition-api\` is deprecated. ${checkDocsMsg}`)
 
 // Stub functions that provided type support
-export const defineNuxtMiddleware = mw => mw
+export const defineNuxtMiddleware = unsupported('You are using `defineNuxtMiddleware`, which is not supported. You can remove wrapper function to keep using Nuxt 2 middleware.')
 export const defineNuxtPlugin = unsupported('You are using `defineNuxtPlugin`, which can be replaced with `defineNuxtPlugin` (import from `#app`).')
 
 // Internal exports

packages/kit/src/config/schema/build.ts

@@ -15,17 +15,14 @@ export default {
   /**
    * Nuxt uses `webpack-bundle-analyzer` to visualize your bundles and how to optimize them.
    *
-   * This option is normally enabled by the CLI argument `--analyze`.
-   *
-   * Set to `true` to enable bundle analysis, or pass [an object with options](https://github.com/webpack-contrib/webpack-bundle-analyzer#options-for-plugin).
+   * Set to `true` to enable bundle analysis, or pass an object with options: [for webpack](https://github.com/webpack-contrib/webpack-bundle-analyzer#options-for-plugin) or [for vite](https://github.com/btd/rollup-plugin-visualizer#options).
    *
    * @example
    * ```js
    * analyze: {
    *   analyzerMode: 'static'
    * }
    * ```
-   * @version 2
    */
   analyze: false,
 

packages/kit/src/module/install.ts

@@ -1,4 +1,4 @@
-import { resolveModule, requireModule } from '../utils/cjs'
+import { resolveModule, requireModule, importModule } from '../utils/cjs'
 import { resolveAlias } from '../utils/resolve'
 import type { LegacyNuxtModule, NuxtModule, ModuleMeta, ModuleInstallOptions, ModuleOptions, ModuleSrc } from '../types/module'
 import type { Nuxt } from '../types/nuxt'
@@ -32,7 +32,9 @@ export async function installModule (nuxt: Nuxt, installOpts: ModuleInstallOptio
   let handler: LegacyNuxtModule
   if (typeof src === 'string') {
     const _src = resolveModule(resolveAlias(src, nuxt.options.alias), { paths: nuxt.options.modulesDir })
-    handler = requireModule(_src)
+    // TODO: also check with type: 'module' in closest `package.json`
+    const isESM = _src.endsWith('.mjs') || meta.isESM
+    handler = isESM ? await importModule(_src) : requireModule(_src)
     if (!meta.name) {
       meta.name = src
     }

packages/nitro/package.json

@@ -58,8 +58,8 @@
     "pathe": "^0.2.0",
     "pretty-bytes": "^5.6.0",
     "rollup": "^2.58.0",
-    "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-visualizer": "^5.5.2",
     "serve-placeholder": "^1.2.4",
     "serve-static": "^1.14.1",
     "std-env": "^2.3.1",

packages/nitro/src/context.ts

@@ -4,6 +4,7 @@ import defu from 'defu'
 import { createHooks, Hookable, NestedHooks } from 'hookable'
 import type { Preset } from 'unenv'
 import type { NuxtHooks, NuxtOptions } from '@nuxt/kit'
+import type { PluginVisualizerOptions } from 'rollup-plugin-visualizer'
 import { tryImport, resolvePath, detectTarget, extendPreset } from './utils'
 import * as PRESETS from './presets'
 import type { NodeExternalsOptions } from './rollup/plugins/externals'
@@ -28,7 +29,7 @@ export interface NitroContext {
   minify: boolean
   sourceMap: boolean
   externals: boolean | NodeExternalsOptions
-  analyze: boolean
+  analyze: false | PluginVisualizerOptions
   entry: string
   node: boolean
   preset: string
@@ -94,7 +95,7 @@ export function getNitroContext (nuxtOptions: NuxtOptions, input: NitroInput): N
     minify: undefined,
     sourceMap: undefined,
     externals: undefined,
-    analyze: undefined,
+    analyze: nuxtOptions.build.analyze as any,
     entry: undefined,
     node: undefined,
     preset: undefined,

packages/nitro/src/rollup/config.ts

@@ -12,7 +12,7 @@ import replace from '@rollup/plugin-replace'
 import virtual from '@rollup/plugin-virtual'
 import wasmPlugin from '@rollup/plugin-wasm'
 import inject from '@rollup/plugin-inject'
-import analyze from 'rollup-plugin-analyzer'
+import { visualizer } from 'rollup-plugin-visualizer'
 import * as unenv from 'unenv'
 
 import type { Preset } from 'unenv'
@@ -309,11 +309,6 @@ export const getRollupConfig = (nitroContext: NitroContext) => {
   // https://github.com/rollup/plugins/tree/master/packages/inject
   rollupConfig.plugins.push(inject(env.inject))
 
-  if (nitroContext.analyze) {
-    // https://github.com/doesdev/rollup-plugin-analyzer
-    rollupConfig.plugins.push(analyze())
-  }
-
   // https://github.com/TrySound/rollup-plugin-terser
   // https://github.com/terser/terser#minify-nitroContext
   if (nitroContext.minify) {
@@ -328,5 +323,14 @@ export const getRollupConfig = (nitroContext: NitroContext) => {
     }))
   }
 
+  if (nitroContext.analyze) {
+    // https://github.com/btd/rollup-plugin-visualizer
+    rollupConfig.plugins.push(visualizer({
+      ...nitroContext.analyze,
+      filename: nitroContext.analyze.filename.replace('{name}', 'nitro'),
+      title: 'Nitro Server bundle stats'
+    }))
+  }
+
   return rollupConfig
 }

packages/nitro/src/runtime/entries/dev.ts

@@ -1,14 +1,26 @@
 import '#polyfill'
 import { Server } from 'http'
-import { parentPort } from 'worker_threads'
-import type { AddressInfo } from 'net'
+import { tmpdir } from 'os'
+import { join } from 'path'
+import { mkdirSync } from 'fs'
+import { threadId, parentPort } from 'worker_threads'
 import { handle } from '../server'
 
 const server = new Server(handle)
 
-const netServer = server.listen(0, () => {
-  parentPort.postMessage({
-    event: 'listen',
-    port: (netServer.address() as AddressInfo).port
-  })
+function createSocket () {
+  const isWin = process.platform === 'win32'
+  const socketName = `worker-${process.pid}-${threadId}.sock`
+  if (isWin) {
+    return join('\\\\.\\pipe\\nitro', socketName)
+  } else {
+    const socketDir = join(tmpdir(), 'nitro')
+    mkdirSync(socketDir, { recursive: true })
+    return join(socketDir, socketName)
+  }
+}
+
+const socketPath = createSocket()
+server.listen(socketPath, () => {
+  parentPort.postMessage({ event: 'listen', address: { socketPath } })
 })