Merge branch 'main' into feat/payload-jsonp

docs/content/3.api/5.commands/init.md

@@ -4,13 +4,19 @@
 npx nuxi init|create [--verbose|-v] [--template,-t] [dir]
 ```
 
-The `init` command initializes a fresh Nuxt project.
+The `init` command initializes a fresh Nuxt project using [unjs/giget](https://github.com/unjs/giget).
+
+## Options
 
 Option        | Default          | Description
 -------------------------|-----------------|------------------
-`--template, -t` | `nuxt/starter#v3` | Specify a Git repository to use as a template.
+`--template, -t` | `v3` | Specify template name or git repository to use as a template. Format is `gh:org/name` to use a custom github template.
 `--force`      | `false` | Force clone to any existing directory.
 `--offline`   | `false` | Do not attempt to download from github and only use local cache.
-`--prefer-offline` | `false` | Try local cache first. (might be outdated)
-`--shell` | `false` | (experimental) Open shell in cloned directory.
-`dir` | `nuxt-app` | Name of the install directory.
+`--prefer-offline` | `false` | Try local cache first to download templates.
+`--shell` | `false` | Open shell in cloned directory (experimental).
+
+## Environment variables
+
+- `NUXI_INIT_REGISTRY`: Set to a custom template registry. ([learn more](https://github.com/unjs/giget#custom-registry)).
+  - Default registry is loaded from [nuxt/starter/templates](https://github.com/nuxt/starter/tree/templates/templates)

package.json

@@ -59,7 +59,7 @@
     "expect-type": "^0.14.2",
     "globby": "^13.1.2",
     "jiti": "^1.15.0",
-    "lerna": "^5.5.0",
+    "lerna": "^5.5.1",
     "markdownlint-cli": "^0.32.2",
     "pathe": "^0.3.7",
     "rimraf": "^3.0.2",

packages/nuxi/package.json

@@ -34,7 +34,7 @@
     "destr": "^1.1.1",
     "execa": "^6.1.0",
     "flat": "^5.0.2",
-    "giget": "^0.0.4",
+    "giget": "^0.1.5",
     "jiti": "^1.15.0",
     "listhen": "^0.2.15",
     "mlly": "^0.5.14",
@@ -44,7 +44,6 @@
     "pkg-types": "^0.3.5",
     "scule": "^0.3.2",
     "semver": "^7.3.7",
-    "superb": "^4.0.0",
     "unbuild": "latest"
   },
   "optionalDependencies": {

packages/nuxi/src/commands/init.ts

@@ -1,27 +1,11 @@
-import { downloadRepo, startShell } from 'giget'
-import { relative, resolve } from 'pathe'
-import superb from 'superb'
+import { downloadTemplate, startShell } from 'giget'
+import { relative } from 'pathe'
 import consola from 'consola'
 import { defineNuxtCommand } from './index'
 
 const rpath = (p: string) => relative(process.cwd(), p)
 
-const resolveTemplate = (template: string | boolean) => {
-  if (typeof template === 'boolean') {
-    consola.error('Please specify a template!')
-    process.exit(1)
-  }
-
-  if (!template) {
-    template = 'v3'
-  }
-
-  if (template.includes('/')) {
-    return template
-  }
-
-  return `nuxt/starter#${template}`
-}
+const DEFAULT_REGISTRY = 'https://raw.githubusercontent.com/nuxt/starter/templates/templates'
 
 export default defineNuxtCommand({
   meta: {
@@ -31,32 +15,31 @@ export default defineNuxtCommand({
   },
   async invoke (args) {
     // Clone template
-    const src = resolveTemplate(args.template || args.t)
-    const dstDir = resolve(process.cwd(), args._[0] || 'nuxt-app')
-    if (args.verbose || args.v) {
-      process.env.DEBUG = process.env.DEBUG || 'true'
-    }
-    await downloadRepo(src, dstDir, {
+    const template = args.template || args.t || 'v3'
+
+    const t = await downloadTemplate(template, {
+      dir: args._[0] as string,
       force: args.force,
       offline: args.offline,
-      preferOffline: args['prefer-offline']
+      preferOffline: args['prefer-offline'],
+      registry: process.env.NUXI_INIT_REGISTRY || DEFAULT_REGISTRY
     })
 
     // Show next steps
-    const relativeDist = rpath(dstDir)
+    const relativeDist = rpath(t.dir)
     const nextSteps = [
-      relativeDist.length > 1 && `📁  \`cd ${relativeDist}\``,
-      '💿  Install dependencies with `npm install` or `yarn install` or `pnpm install --shamefully-hoist`',
-      '🚀  Start development server with `npm run dev` or `yarn dev` or `pnpm run dev`'
+      !args.shell && relativeDist.length > 1 && `\`cd ${relativeDist}\``,
+      'Install dependencies with `npm install` or `yarn install` or `pnpm install --shamefully-hoist`',
+      'Start development server with `npm run dev` or `yarn dev` or `pnpm run dev`'
     ].filter(Boolean)
 
-    consola.log(`\n ✨ Your ${superb.random()} Nuxt project is just created! Next steps:\n`)
+    consola.log(`✨ Nuxt project is created with \`${t.name}\` template. Next steps:`)
     for (const step of nextSteps) {
-      consola.log(` ${step}\n`)
+      consola.log(` › ${step}`)
     }
 
     if (args.shell) {
-      startShell(dstDir)
+      startShell(t.dir)
     }
   }
 })

packages/nuxt/package.json

@@ -38,7 +38,7 @@
     "@nuxt/vite-builder": "3.0.0-rc.9",
     "@vue/reactivity": "^3.2.39",
     "@vue/shared": "^3.2.39",
-    "@vueuse/head": "^0.7.9",
+    "@vueuse/head": "^0.7.10",
     "chokidar": "^3.5.3",
     "cookie-es": "^0.5.0",
     "defu": "^6.1.0",

packages/nuxt/src/app/components/nuxt-error-page.vue

@@ -37,10 +37,10 @@ const description = error.message || error.toString()
 const stack = process.dev && !is404 ? error.description || `<pre>${stacktrace}</pre>` : undefined
 
 // TODO: Investigate side-effect issue with imports
-const _Error404 = defineAsyncComponent(() => import('@nuxt/ui-templates/templates/error-404.vue'))
+const _Error404 = defineAsyncComponent(() => import('@nuxt/ui-templates/templates/error-404.vue').then(r => r.default || r))
 const _Error = process.dev
-  ? defineAsyncComponent(() => import('@nuxt/ui-templates/templates/error-dev.vue'))
-  : defineAsyncComponent(() => import('@nuxt/ui-templates/templates/error-500.vue'))
+  ? defineAsyncComponent(() => import('@nuxt/ui-templates/templates/error-dev.vue').then(r => r.default || r))
+  : defineAsyncComponent(() => import('@nuxt/ui-templates/templates/error-500.vue').then(r => r.default || r))
 
 const ErrorTemplate = is404 ? _Error404 : _Error
 </script>

packages/nuxt/src/app/components/nuxt-root.vue

@@ -9,7 +9,7 @@
 import { defineAsyncComponent, onErrorCaptured, provide } from 'vue'
 import { callWithNuxt, isNuxtError, showError, useError, useRoute, useNuxtApp } from '#app'
 
-const ErrorComponent = defineAsyncComponent(() => import('#build/error-component.mjs'))
+const ErrorComponent = defineAsyncComponent(() => import('#build/error-component.mjs').then(r => r.default || r))
 
 const nuxtApp = useNuxtApp()
 const onResolve = () => nuxtApp.callHook('app:suspense:resolve')

packages/nuxt/src/components/loader.ts

@@ -74,7 +74,7 @@ export const loaderPlugin = createUnplugin((options: LoaderOptions) => {
           if (lazy) {
             imports.add(genImport('vue', [{ name: 'defineAsyncComponent', as: '__defineAsyncComponent' }]))
             identifier += '_lazy'
-            imports.add(`const ${identifier} = /*#__PURE__*/ __defineAsyncComponent(${genDynamicImport(component.filePath)})`)
+            imports.add(`const ${identifier} = /*#__PURE__*/ __defineAsyncComponent(${genDynamicImport(component.filePath, { interopDefault: true })})`)
           } else {
             imports.add(genImport(component.filePath, [{ name: component.export, as: identifier }]))
           }

packages/nuxt/src/core/nuxt.ts

@@ -1,4 +1,4 @@
-import { normalize, resolve } from 'pathe'
+import { join, normalize, resolve } from 'pathe'
 import { createHooks } from 'hookable'
 import type { Nuxt, NuxtOptions, NuxtConfig, ModuleContainer, NuxtHooks } from '@nuxt/schema'
 import { loadNuxtConfig, LoadNuxtOptions, nuxtCtx, installModule, addComponent, addVitePlugin, addWebpackPlugin, tryResolveModule, addPlugin } from '@nuxt/kit'
@@ -62,6 +62,8 @@ async function initNuxt (nuxt: Nuxt) {
   // Add import protection
   const config = {
     rootDir: nuxt.options.rootDir,
+    // Exclude top-level resolutions by plugins
+    exclude: [join(nuxt.options.rootDir, 'index.html')],
     patterns: vueAppPatterns(nuxt)
   }
   addVitePlugin(ImportProtectionPlugin.vite(config))

packages/nuxt/src/core/plugins/import-protection.ts

@@ -1,7 +1,7 @@
 import { createRequire } from 'node:module'
 import { createUnplugin } from 'unplugin'
 import { logger } from '@nuxt/kit'
-import { isAbsolute, relative, resolve } from 'pathe'
+import { isAbsolute, join, relative, resolve } from 'pathe'
 import type { Nuxt } from '@nuxt/schema'
 import escapeRE from 'escape-string-regexp'
 
@@ -32,6 +32,12 @@ export const ImportProtectionPlugin = createUnplugin(function (options: ImportPr
     enforce: 'pre',
     resolveId (id, importer) {
       if (!importer) { return }
+      if (id.startsWith('.')) {
+        id = join(importer, '..', id)
+      }
+      if (isAbsolute(id)) {
+        id = relative(options.rootDir, id)
+      }
       if (importersToExclude.some(p => typeof p === 'string' ? importer === p : p.test(importer))) { return }
 
       const invalidImports = options.patterns.filter(([pattern]) => pattern instanceof RegExp ? pattern.test(id) : pattern === id)

packages/nuxt/src/core/runtime/nitro/renderer.ts

@@ -268,7 +268,7 @@ function renderHTMLDocument (html: NuxtRenderHTMLContext) {
 async function renderInlineStyles (usedModules: Set<string> | string[]) {
   const styleMap = await getSSRStyles()
   const inlinedStyles = new Set<string>()
-  for (const mod of usedModules) {
+  for (const mod of ['entry', ...usedModules]) {
     if (mod in styleMap) {
       for (const style of await styleMap[mod]()) {
         inlinedStyles.add(`<style>${style}</style>`)

packages/nuxt/src/core/templates.ts

@@ -154,7 +154,7 @@ export const layoutTemplate: NuxtTemplate<TemplateContext> = {
   filename: 'layouts.mjs',
   getContents ({ app }) {
     const layoutsObject = genObjectFromRawEntries(Object.values(app.layouts).map(({ name, file }) => {
-      return [name, `defineAsyncComponent(${genDynamicImport(file)})`]
+      return [name, `defineAsyncComponent(${genDynamicImport(file, { interopDefault: true })})`]
     }))
     return [
       'import { defineAsyncComponent } from \'vue\'',

packages/vite/package.json

@@ -49,7 +49,7 @@
     "ufo": "^0.8.5",
     "unplugin": "^0.9.2",
     "vite": "~3.1.0",
-    "vite-node": "^0.23.1",
+    "vite-node": "^0.23.2",
     "vite-plugin-checker": "^0.5.1",
     "vue-bundle-renderer": "^0.4.2"
   },

packages/vite/src/plugins/ssr-styles.ts

@@ -60,11 +60,11 @@ export function ssrStylesPlugin (options: SSRStylePluginOptions): Plugin {
         source:
           [
             ...globalStylesArray.map((css, i) => `import style_${i} from './${css}';`),
-            `const globalStyles = [${globalStylesArray.map((_, i) => `style_${i}`).join(', ')}]`,
-            'const resolveStyles = r => globalStyles.concat(r.default || r || [])',
-            `export default ${genObjectFromRawEntries(
-              Object.entries(emitted).map(([key, value]) => [key, `() => import('./${this.getFileName(value)}').then(resolveStyles)`])
-            )}`
+            'const interopDefault = r => r.default || r || []',
+            `export default ${genObjectFromRawEntries([
+              ['entry', `() => [${globalStylesArray.map((_, i) => `style_${i}`).join(', ')}]`],
+              ...Object.entries(emitted).map(([key, value]) => [key, `() => import('./${this.getFileName(value)}').then(interopDefault)`]) as [string, string][]
+            ])}`
           ].join('\n')
       })
     },

packages/webpack/package.json

@@ -21,7 +21,7 @@
     "@nuxt/kit": "3.0.0-rc.9",
     "autoprefixer": "^10.4.8",
     "css-loader": "^6.7.1",
-    "css-minimizer-webpack-plugin": "^4.0.0",
+    "css-minimizer-webpack-plugin": "^4.1.0",
     "cssnano": "^5.1.13",
     "esbuild-loader": "^2.20.0",
     "escape-string-regexp": "^5.0.0",