From e90b8c28d1d425338f922e5c62454d8e559197f9 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Tue, 5 Apr 2022 15:02:29 +0100 Subject: [PATCH] refactor(nuxt3,bridge)!: rename `useMeta` to `useHead` (#4066) --- docs/content/1.getting-started/4.bridge.md | 14 ++-- .../5.bridge-composition-api.md | 8 +-- docs/content/3.docs/1.usage/3.meta-tags.md | 10 +-- docs/content/3.docs/3.migration/4.meta.md | 8 +-- .../{use-meta.md => use-head.md} | 6 +- examples/README.md | 2 +- .../{use-meta => use-head}/app.vue | 4 +- .../{use-meta => use-head}/nuxt.config.ts | 0 .../{use-meta => use-head}/package.json | 2 +- .../{use-meta => use-head}/tsconfig.json | 0 packages/bridge/src/meta.ts | 10 +-- packages/bridge/src/runtime/head | 1 + packages/bridge/src/runtime/meta | 1 - packages/nuxt3/package.json | 2 +- packages/nuxt3/src/app/index.ts | 4 +- packages/nuxt3/src/auto-imports/presets.ts | 5 +- packages/nuxt3/src/core/nuxt.ts | 2 +- packages/nuxt3/src/{meta => head}/module.ts | 8 +-- .../src/{meta => head}/runtime/components.ts | 4 +- .../src/{meta => head}/runtime/composables.ts | 18 ++++- .../nuxt3/src/{meta => head}/runtime/index.ts | 0 .../runtime/lib/vue-meta.plugin.ts | 2 +- .../runtime/lib/vueuse-head.plugin.ts | 2 +- .../src/{meta => head}/runtime/plugin.ts | 6 +- packages/schema/src/config/_app.ts | 68 ++++++++++++------- packages/schema/src/config/_common.ts | 11 ++- test/basic.test.ts | 12 ++++ test/fixtures/basic/pages/head.vue | 30 ++++++++ yarn.lock | 4 +- 29 files changed, 163 insertions(+), 81 deletions(-) rename docs/content/4.examples/3.composables/{use-meta.md => use-head.md} (67%) rename examples/composables/{use-meta => use-head}/app.vue (93%) rename examples/composables/{use-meta => use-head}/nuxt.config.ts (100%) rename examples/composables/{use-meta => use-head}/package.json (88%) rename examples/composables/{use-meta => use-head}/tsconfig.json (100%) create mode 120000 packages/bridge/src/runtime/head delete mode 120000 packages/bridge/src/runtime/meta rename packages/nuxt3/src/{meta => head}/module.ts (82%) rename packages/nuxt3/src/{meta => head}/runtime/components.ts (97%) rename packages/nuxt3/src/{meta => head}/runtime/composables.ts (59%) rename packages/nuxt3/src/{meta => head}/runtime/index.ts (100%) rename packages/nuxt3/src/{meta => head}/runtime/lib/vue-meta.plugin.ts (95%) rename packages/nuxt3/src/{meta => head}/runtime/lib/vueuse-head.plugin.ts (95%) rename packages/nuxt3/src/{meta => head}/runtime/plugin.ts (91%) create mode 100644 test/fixtures/basic/pages/head.vue diff --git a/docs/content/1.getting-started/4.bridge.md b/docs/content/1.getting-started/4.bridge.md index 04a06f45fe..e2d83cfecd 100644 --- a/docs/content/1.getting-started/4.bridge.md +++ b/docs/content/1.getting-started/4.bridge.md @@ -198,13 +198,13 @@ If you want to use the new Nuxt composables (such as `useNuxtApp` or `useRuntime Although a compatibility interface is provided via `nuxtApp.vueApp` you should avoid registering plugins, directives, mixins or components this way without adding your own logic to ensure they are not installed more than once, or this may cause a memory leak. :: -## New `useMeta` (optional) +## New `useHead` (optional) -Nuxt Bridge provides a new Nuxt 3 meta API that can be accessed with a new `useMeta` composable. +Nuxt Bridge provides a new Nuxt 3 meta API that can be accessed with a new `useHead` composable. ```vue @@ -222,10 +222,10 @@ export default defineNuxtConfig({ }) ``` -This `useMeta` composable uses `@vueuse/head` under the hood (rather than `vue-meta`) to manipulate your ``. -Accordingly, we recommend not to use both the native Nuxt 2 `head()` properties as well as `useMeta`, as they may conflict. +This `useHead` composable uses `@vueuse/head` under the hood (rather than `vue-meta`) to manipulate your ``. +Accordingly, we recommend not to use both the native Nuxt 2 `head()` properties as well as `useHead`, as they may conflict. -For more information on how to use this composable, see [the docs](/docs/usage/meta-tags#usemeta-composable). +For more information on how to use this composable, see [the docs](/docs/usage/meta-tags#usehead-composable). ## Feature Flags @@ -244,7 +244,7 @@ export default defineNuxtConfig({ // Use Vite as the bundler instead of webpack 4 // vite: true, - // Enable Nuxt 3 compatible useMeta + // Enable Nuxt 3 compatible useHead // meta: true, // -- Default features -- diff --git a/docs/content/1.getting-started/5.bridge-composition-api.md b/docs/content/1.getting-started/5.bridge-composition-api.md index 7f5412f943..1ca27398ef 100644 --- a/docs/content/1.getting-started/5.bridge-composition-api.md +++ b/docs/content/1.getting-started/5.bridge-composition-api.md @@ -250,12 +250,12 @@ title.value = 'new title' Be careful not to use both `useNuxt2Meta()` and the Options API `head()` within the same component, as behavior may be unpredictable. :: -Nuxt Bridge also provides a Nuxt 3-compatible meta implementation that can be accessed with the `useMeta` composable. +Nuxt Bridge also provides a Nuxt 3-compatible meta implementation that can be accessed with the `useHead` composable. ```diff @@ -272,6 +272,6 @@ export default defineNuxtConfig({ }) ``` -This `useMeta` composable uses `@vueuse/head` under the hood (rather than `vue-meta`) to manipulate your ``. Accordingly, it is recommended not to use both the native Nuxt 2 `head()` properties as well as `useMeta`, as they may conflict. +This `useHead` composable uses `@vueuse/head` under the hood (rather than `vue-meta`) to manipulate your ``. Accordingly, it is recommended not to use both the native Nuxt 2 `head()` properties as well as `useHead`, as they may conflict. -For more information on how to use this composable, see [the Nuxt 3 docs](/docs/usage/meta-tags#usemeta-composable). +For more information on how to use this composable, see [the Nuxt 3 docs](/docs/usage/meta-tags#usehead-composable). diff --git a/docs/content/3.docs/1.usage/3.meta-tags.md b/docs/content/3.docs/1.usage/3.meta-tags.md index 497e1b5773..8f7c5ce9cb 100644 --- a/docs/content/3.docs/1.usage/3.meta-tags.md +++ b/docs/content/3.docs/1.usage/3.meta-tags.md @@ -2,16 +2,16 @@ You can customize the meta tags for your site through several different ways: -## `useMeta` Composable +## `useHead` Composable -Within your `setup` function, you can call `useMeta` with an object of meta properties with keys corresponding to meta tags: `title`, `base`, `script`, `style`, `meta` and `link`, as well as `htmlAttrs` and `bodyAttrs`. Alternatively, you can pass a function returning the object for reactive metadata. +Within your `setup` function, you can call `useHead` with an object of meta properties with keys corresponding to meta tags: `title`, `base`, `script`, `style`, `meta` and `link`, as well as `htmlAttrs` and `bodyAttrs`. Alternatively, you can pass a function returning the object for reactive metadata. For example: ```js export default { setup () { - useMeta({ + useHead({ meta: [ { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1' } ], @@ -63,7 +63,7 @@ export default { ## Example: usage with definePageMeta -You can use `definePageMeta` along with `useMeta` to set metadata based on the current route. +You can use `definePageMeta` along with `useHead` to set metadata based on the current route. For example, to include the page title alongside your app name, first define your page title: @@ -81,7 +81,7 @@ And then in your layout file: diff --git a/docs/content/3.docs/3.migration/4.meta.md b/docs/content/3.docs/3.migration/4.meta.md index 5aeb4dcf92..a46b4bffbf 100644 --- a/docs/content/3.docs/3.migration/4.meta.md +++ b/docs/content/3.docs/3.migration/4.meta.md @@ -3,7 +3,7 @@ Nuxt 3 provides several different ways to manage your meta tags. 1. Through your `nuxt.config`. -1. Through the `useMeta` [composable](/docs/usage/meta-tags#usemeta-composable) +1. Through the `useHead` [composable](/docs/usage/meta-tags#usehead-composable) 1. Through [global meta components](/docs/usage/meta-tags#meta-components) You can customize `title`, `base`, `script`, `style`, `meta`, `link`, `htmlAttrs` and `bodyAttrs`. @@ -17,9 +17,9 @@ Nuxt currently uses [`vueuse/head`](https://github.com/vueuse/head) to manage yo ## Migration 1. In your `nuxt.config`, rename `head` to `meta`. Consider moving this shared meta configuration into your `app.vue` instead. (Note that objects no longer have a `hid` key for deduplication.) -1. In your components, rename your `head` option to `meta`. If you need to access the component state, you should migrate to using `useMeta`. You might also consider using the built-in meta-components. +1. If you need to access the component state with `head`, you should migrate to using `useHead`. You might also consider using the built-in meta-components. -### Example: `useMeta` +### Example: `useHead` ::code-group @@ -50,7 +50,7 @@ const title = ref('My App') const description = ref('My App Description') // This will be reactive even you change title/description above -useMeta({ +useHead({ title, meta: [{ name: 'description', diff --git a/docs/content/4.examples/3.composables/use-meta.md b/docs/content/4.examples/3.composables/use-head.md similarity index 67% rename from docs/content/4.examples/3.composables/use-meta.md rename to docs/content/4.examples/3.composables/use-head.md index b910efab73..4060dd628a 100644 --- a/docs/content/4.examples/3.composables/use-meta.md +++ b/docs/content/4.examples/3.composables/use-head.md @@ -2,12 +2,12 @@ template: Example --- -# useMeta +# useHead -This example shows how to use `useMeta` and Nuxt built-in components to bind meta data to the head of the page. +This example shows how to use `useHead` and Nuxt built-in components to bind meta data to the head of the page. ::alert{type=info icon=👉} Learn more about [meta tags](/docs/usage/meta-tags). :: -::sandbox{repo="nuxt/framework" branch="main" dir="examples/composables/use-meta" file="app.vue"} +::sandbox{repo="nuxt/framework" branch="main" dir="examples/composables/use-head" file="app.vue"} diff --git a/examples/README.md b/examples/README.md index 025e64a94e..0e04cfbcac 100644 --- a/examples/README.md +++ b/examples/README.md @@ -8,7 +8,7 @@ | `use-async-data` | [GitHub](https://github.com/nuxt/framework/tree/main/examples/use-async-data) | [Play Online](https://stackblitz.com/github/nuxt/framework/tree/main/examples/use-async-data?file=app.vue&terminal=dev) | | `use-cookie` | [GitHub](https://github.com/nuxt/framework/tree/main/examples/use-cookie) | [Play Online](https://stackblitz.com/github/nuxt/framework/tree/main/examples/use-cookie?file=app.vue&terminal=dev) | | `use-fetch` | [GitHub](https://github.com/nuxt/framework/tree/main/examples/use-fetch) | [Play Online](https://stackblitz.com/github/nuxt/framework/tree/main/examples/use-fetch?file=app.vue&terminal=dev) | -| `use-meta` | [GitHub](https://github.com/nuxt/framework/tree/main/examples/use-meta) | [Play Online](https://stackblitz.com/github/nuxt/framework/tree/main/examples/use-meta?file=app.vue&terminal=dev) | +| `use-head` | [GitHub](https://github.com/nuxt/framework/tree/main/examples/use-head) | [Play Online](https://stackblitz.com/github/nuxt/framework/tree/main/examples/use-head?file=app.vue&terminal=dev) | | `use-state` | [GitHub](https://github.com/nuxt/framework/tree/main/examples/use-state) | [Play Online](https://stackblitz.com/github/nuxt/framework/tree/main/examples/use-state?file=app.vue&terminal=dev) | | `components` | [GitHub](https://github.com/nuxt/framework/tree/main/examples/components) | [Play Online](https://stackblitz.com/github/nuxt/framework/tree/main/examples/components?file=app.vue&terminal=dev) | | `composables` | [GitHub](https://github.com/nuxt/framework/tree/main/examples/composables) | [Play Online](https://stackblitz.com/github/nuxt/framework/tree/main/examples/composables?file=app.vue&terminal=dev) | diff --git a/examples/composables/use-meta/app.vue b/examples/composables/use-head/app.vue similarity index 93% rename from examples/composables/use-meta/app.vue rename to examples/composables/use-head/app.vue index a7297f7956..ee991987b9 100644 --- a/examples/composables/use-meta/app.vue +++ b/examples/composables/use-head/app.vue @@ -1,5 +1,5 @@