From abfbd2f34efa69acf3488c3b06d264c954f16631 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Wed, 10 Nov 2021 20:25:29 +0000 Subject: [PATCH] feat: add `` meta component (#1820) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Sébastien Chopin Co-authored-by: Pooya Parsa --- docs/content/3.docs/1.usage/3.meta-tags.md | 33 +++++-------------- examples/use-meta/app.vue | 12 ++++--- packages/nuxt3/src/meta/runtime/components.ts | 8 ++++- 3 files changed, 22 insertions(+), 31 deletions(-) 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 9711f042f5..10679ba477 100644 --- a/docs/content/3.docs/1.usage/3.meta-tags.md +++ b/docs/content/3.docs/1.usage/3.meta-tags.md @@ -23,28 +23,9 @@ export default { } ``` -## `head` Component Property - -If you would prefer to use the options syntax, you can do exactly the same thing within your component options with an object or function called `head`. For example: - -```js -export default { - head: { - script: [ - { - async: true, - src: 'https://myscript.com/script.js' - } - ] - } -} -``` - -**Note that `head()` does not have access to the component instance.** - ## Meta Components -Nuxt provides ``, `<Base>`, `<Script>`, `<Style>`, `<Meta>`, `<Link>`, `<Body>` and `<Head>` components so that you can interact directly with your metadata within your component template. +Nuxt provides `<Title>`, `<Base>`, `<Script>`, `<Style>`, `<Meta>`, `<Link>`, `<Body>`, `<Html>` and `<Head>` components so that you can interact directly with your metadata within your component template. Because these component names match native HTML elements, it is very important that they are capitalized in the template. @@ -56,11 +37,13 @@ For example: <template> <div> Hello World - <Head :lang="dynamic > 50 ? 'en-GB' : 'en-US'"> - <Title>{{ dynamic }} title - - - + + + {{ dynamic }} title + + + +