Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-11 08:33:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: simplify example of Head components (#4506)

Browse Source
This commit is contained in:
Sébastien Chopin 2022-04-21 16:58:43 +02:00 committed by GitHub
parent 6905326596
commit 664aa970d0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
docs/content/2.guide/2.features/4.head-management.md
View File

@ -41,30 +41,22 @@ For example:
<!-- @case-police-ignore html -->
```html{}[app.vue]
```vue{}[app.vue]
<script setup>
const title = ref('Hello World')
</script>
<template>
<div>
Hello World
<Html :lang="dynamic > 50 ? 'en-GB' : 'en-US'">
<Head>
<Title>{{ dynamic }} title</Title>
<Meta name="description" :content="`My page's ${dynamic} description`" />
<Link rel="preload" href="/test.txt" as="script" />
<Style type="text/css" :children="styleString" />
</Head>
</Html>
<Head>
<Title>{{ title }}</Title>
<Meta name="description" :content="title" />
<Style type="text/css" children="body { background-color: green; }" />
</Head>
<button class="blue" @click="dynamic = Math.random() * 100">
Click me
</button>
<h1>{{ title }}</h1>
</div>
</template>
<script>
export default {
data: () => ({ dynamic: 49, styleString: 'body { background-color: green; }' })
}
</script>
```
## Example: usage with definePageMeta