Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2025-02-18 06:31:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add <Html> meta component (#1820)

Browse Source 
Co-authored-by: Sébastien Chopin <seb@nuxtjs.com>
Co-authored-by: Pooya Parsa <pyapar@gmail.com>
This commit is contained in:
Daniel Roe 2021-11-10 20:25:29 +00:00 committed by GitHub
parent d9c1aa6b02
commit abfbd2f34e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
docs/content/3.docs/1.usage/3.meta-tags.md
View File

@ -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 ## Meta Components
Nuxt provides `<Title>`, `<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. 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> <template>
<div> <div>
Hello World Hello World
<Head :lang="dynamic > 50 ? 'en-GB' : 'en-US'"> <Html :lang="dynamic > 50 ? 'en-GB' : 'en-US'">
<Title>{{ dynamic }} title</Title> <Head>
<Meta name="description" :content="`My page's ${dynamic} description`" /> <Title>{{ dynamic }} title</Title>
<Link rel="preload" href="/test.txt" as="script" /> <Meta name="description" :content="`My page's ${dynamic} description`" />
</Head> <Link rel="preload" href="/test.txt" as="script" />
</Head>
</Html>
<button class="blue" @click="dynamic = Math.random() * 100"> <button class="blue" @click="dynamic = Math.random() * 100">
Click me Click me

12
examples/use-meta/app.vue
View File

@ -2,11 +2,13 @@
<div> <div>
Hello World Hello World
<Head :lang="'' + dynamic"> <Html :lang="String(dynamic)">
<Title>{{ dynamic }} title</Title> <Head>
<Meta name="description" :content="`My page's ${dynamic} description`" /> <Title>{{ dynamic }} title</Title>
<Link rel="preload" href="/test.txt" as="script" /> <Meta name="description" :content="`My page's ${dynamic} description`" />
</Head> <Link rel="preload" href="/test.txt" as="script" />
</Head>
</Html>
<button class="blue" @click="dynamic = Math.random() * 100"> <button class="blue" @click="dynamic = Math.random() * 100">
Clickme Clickme

8
packages/nuxt3/src/meta/runtime/components.ts
View File

@ -193,13 +193,19 @@ export const Style = defineComponent({
// <head> // <head>
export const Head = defineComponent({ export const Head = defineComponent({
name: 'Head', name: 'Head',
setup: (_props, ctx) => ctx.slots.default
})
// <html>
export const Html = defineComponent({
name: 'Html',
props: { props: {
...globalProps, ...globalProps,
manifest: String, manifest: String,
version: String, version: String,
xmlns: String xmlns: String
}, },
setup: setupForUseMeta(headAttrs => ({ headAttrs }), true) setup: setupForUseMeta(htmlAttrs => ({ htmlAttrs }), true)
}) })
// <body> // <body>