Merge remote-tracking branch 'origin/main' into fix/shared-cookie-state

nuxt · Jun 6, 2023 · 8732fad · 8732fad
2 parents 8143a11 + 370653a
commit 8732fad
Show file tree

Hide file tree

Showing 26 changed files with 454 additions and 489 deletions.
diff --git a/docs/1.getting-started/3.configuration.md b/docs/1.getting-started/3.configuration.md
@@ -133,3 +133,60 @@ Name                                          | Config File             | How To
 | [Stylelint](https://stylelint.io)           | `.stylelintrc.json`     | [More Info](https://stylelint.io/user-guide/configure)
 | [TailwindCSS](https://tailwindcss.com)      |  `tailwind.config.js`   | [More Info](https://tailwindcss.nuxtjs.org/tailwind/config/)
 | [Vitest](https://vitest.dev)                | `vitest.config.ts`      | [More Info](https://vitest.dev/config/)
+
+## Vue Configuration
+
+### With Vite
+
+If you need to pass options to `@vitejs/plugin-vue` or `@vitejs/plugin-vue-jsx`, you can do this in your `nuxt.config` file.
+
+- `vite.vue` for `@vitejs/plugin-vue`. Check available options [here](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue).
+- `vite.vueJsx` for `@vitejs/plugin-vue-jsx`. Check available options [here](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue-jsx).
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  vite: {
+    vue: {
+      customElement: true
+    },
+    vueJsx: {
+      mergeProps: true
+    }
+  }
+})
+```
+
+:ReadMore{link="/docs/guide/directory-structure/nuxt.config#vue"}
+
+### With webpack
+
+If you use webpack and need to configure `vue-loader`, you can do this using `webpack.loaders.vue` key inside your `nuxt.config` file. The available options are [defined here](https://github.com/vuejs/vue-loader/blob/main/src/index.ts#L32-L62).
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  webpack: {
+    loaders: {
+      vue: {
+        hotReload: true,
+      }
+    }
+  }
+})
+```
+
+:ReadMore{link="/docs/guide/directory-structure/nuxt.config#loaders"}
+
+### Enabling Experimental Vue Features
+
+You may need to enable experimental features in Vue, such as `defineModel` or `propsDestructure`. Nuxt provides an easy way to do that in `nuxt.config.ts`, no matter which builder you are using:
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  vue: {
+    defineModel: true,
+    propsDestructure: true
+  }
+})
+```
+
+:ReadMore{link="/docs/guide/directory-structure/nuxt.config#vue-1"}
diff --git a/package.json b/package.json
@@ -44,14 +44,13 @@
     "@nuxt/test-utils": "workspace:*",
     "@nuxt/webpack-builder": "workspace:*",
     "@nuxtjs/eslint-config-typescript": "12.0.0",
-    "@types/crawler": "1.2.2",
     "@types/node": "18.16.16",
     "@types/semver": "7.5.0",
     "case-police": "0.6.1",
     "chalk": "5.2.0",
     "changelogen": "0.5.3",
+    "cheerio": "1.0.0-rc.12",
     "consola": "3.1.0",
-    "crawler": "1.4.0",
     "devalue": "4.3.2",
     "eslint": "8.42.0",
     "eslint-import-resolver-typescript": "3.5.5",

diff --git a/packages/kit/build.config.ts b/packages/kit/build.config.ts
@@ -11,5 +11,6 @@ export default defineBuildConfig({
     'webpack',
     'vite',
     'h3'
-  ]
+  ],
+  failOnWarn: false
 })
diff --git a/packages/kit/package.json b/packages/kit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/kit",
-  "version": "3.5.2",
+  "version": "3.5.3",
   "repository": "nuxt/nuxt",
   "license": "MIT",
   "type": "module",
@@ -29,7 +29,6 @@
     "ignore": "^5.2.4",
     "jiti": "^1.18.2",
     "knitwork": "^1.0.0",
-    "lodash.template": "^4.5.0",
     "mlly": "^1.3.0",
     "pathe": "^1.1.1",
     "pkg-types": "^1.0.3",
@@ -41,8 +40,9 @@
   },
   "devDependencies": {
     "@types/hash-sum": "1.0.0",
-    "@types/lodash.template": "4.5.1",
+    "@types/lodash-es": "4.17.7",
     "@types/semver": "7.5.0",
+    "lodash-es": "4.17.21",
     "nitropack": "2.4.1",
     "unbuild": "latest",
     "vite": "4.3.9",

diff --git a/packages/kit/src/internal/template.ts b/packages/kit/src/internal/template.ts
@@ -1,5 +1,6 @@
 import { promises as fsp } from 'node:fs'
-import lodashTemplate from 'lodash.template'
+// TODO: swap out when https://github.com/lodash/lodash/pull/5649 is merged
+import { template as lodashTemplate } from 'lodash-es'
 import { genDynamicImport, genImport, genSafeVariableName } from 'knitwork'
 
 import type { NuxtTemplate } from '@nuxt/schema'

diff --git a/packages/nuxi/package.json b/packages/nuxi/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nuxi",
-  "version": "3.5.2",
+  "version": "3.5.3",
   "repository": "nuxt/nuxt",
   "license": "MIT",
   "type": "module",

diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nuxt",
-  "version": "3.5.2",
+  "version": "3.5.3",
   "repository": "nuxt/nuxt",
   "license": "MIT",
   "type": "module",

diff --git a/packages/nuxt/src/app/composables/component.ts b/packages/nuxt/src/app/composables/component.ts
@@ -13,8 +13,9 @@ async function runLegacyAsyncData (res: Record<string, any> | Promise<Record<str
   const nuxtApp = useNuxtApp()
   const route = useRoute()
   const vm = getCurrentInstance()!
-  const { fetchKey } = vm.proxy!.$options
-  const key = typeof fetchKey === 'function' ? fetchKey(() => '') : fetchKey || route.fullPath
+  const { fetchKey, _fetchKeyBase } = vm.proxy!.$options
+  const key = (typeof fetchKey === 'function' ? fetchKey(() => '') : fetchKey) ||
+    ([_fetchKeyBase, route.fullPath, route.matched.findIndex(r => Object.values(r.components || {}).includes(vm.type))].join(':'))
   const { data, error } = await useAsyncData(`options:asyncdata:${key}`, () => nuxtApp.runWithContext(() => fn(nuxtApp)))
   if (error.value) {
     throw createError(error.value)
@@ -27,7 +28,8 @@ async function runLegacyAsyncData (res: Record<string, any> | Promise<Record<str
 }
 
 export const defineNuxtComponent: typeof defineComponent =
-  function defineNuxtComponent (options: any): any {
+  function defineNuxtComponent (...args: any[]): any {
+    const [options, key] = args
     const { setup } = options
 
     // Avoid wrapping if no options api is used
@@ -40,6 +42,7 @@ export const defineNuxtComponent: typeof defineComponent =
 
     return {
       [NuxtComponentIndicator]: true,
+      _fetchKeyBase: key,
       ...options,
       setup (props, ctx) {
         const nuxtApp = useNuxtApp()

diff --git a/packages/nuxt/src/core/nuxt.ts b/packages/nuxt/src/core/nuxt.ts
@@ -408,7 +408,10 @@ export async function loadNuxt (opts: LoadNuxtOptions): Promise<Nuxt> {
   options._modules.push(schemaModule)
   options.modulesDir.push(resolve(options.workspaceDir, 'node_modules'))
   options.modulesDir.push(resolve(pkgDir, 'node_modules'))
-  options.build.transpile.push('@nuxt/ui-templates')
+  options.build.transpile.push(
+    '@nuxt/ui-templates', // this exposes vue SFCs
+    'std-env' // we need to statically replace process.env when used in runtime code
+  )
   options.alias['vue-demi'] = resolve(options.appDir, 'compat/vue-demi')
   options.alias['@vue/composition-api'] = resolve(options.appDir, 'compat/capi')
   if (options.telemetry !== false && !process.env.NUXT_TELEMETRY_DISABLED) {

diff --git a/packages/schema/package.json b/packages/schema/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/schema",
-  "version": "3.5.2",
+  "version": "3.5.3",
   "repository": "nuxt/nuxt",
   "license": "MIT",
   "type": "module",

diff --git a/packages/schema/src/config/build.ts b/packages/schema/src/config/build.ts
@@ -81,7 +81,7 @@ export default defineUntypedSchema({
      * You can provide your own templates which will be rendered based
      * on Nuxt configuration. This feature is specially useful for using with modules.
      *
-     * Templates are rendered using [`lodash.template`](https://lodash.com/docs/4.17.15#template).
+     * Templates are rendered using [`lodash/template`](https://lodash.com/docs/4.17.15#template).
      *
      * @example
      * ```js
@@ -142,10 +142,11 @@ export default defineUntypedSchema({
      *
      * The key will be unique based on the location of the function being invoked within the file.
      *
-     * @type {Array<{ name: string, argumentLength: number }>}
+     * @type {Array<{ name: string, source?: string | RegExp, argumentLength: number }>}
      */
     keyedComposables: {
       $resolve: (val) => [
+        { name: 'defineNuxtComponent', argumentLength: 2 },
         { name: 'useState', argumentLength: 2 },
         { name: 'useFetch', argumentLength: 3 },
         { name: 'useAsyncData', argumentLength: 3 },

diff --git a/packages/test-utils/package.json b/packages/test-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/test-utils",
-  "version": "3.5.2",
+  "version": "3.5.3",
   "repository": "nuxt/nuxt",
   "license": "MIT",
   "type": "module",
@@ -41,7 +41,7 @@
   "peerDependencies": {
     "@jest/globals": "^29.5.0",
     "playwright": "^1.34.3",
-    "vitest": "^0.31.4",
+    "vitest": "^0.30.0 || ^0.31.0",
     "vue": "^3.3.4"
   },
   "peerDependenciesMeta": {

diff --git a/packages/vite/package.json b/packages/vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/vite-builder",
-  "version": "3.5.2",
+  "version": "3.5.3",
   "repository": "nuxt/nuxt",
   "license": "MIT",
   "type": "module",

diff --git a/packages/vite/src/client.ts b/packages/vite/src/client.ts
@@ -37,6 +37,7 @@ export async function buildClient (ctx: ViteBuildContext) {
       devSourcemap: ctx.nuxt.options.sourcemap.client
     },
     define: {
+      'process.env.NODE_ENV': JSON.stringify(ctx.config.mode),
       'process.server': false,
       'process.client': true,
       'module.hot': false