mirror of https://github.com/nuxt/nuxt.git
51 lines
1.3 KiB
Vue
51 lines
1.3 KiB
Vue
<template>
|
|
<NuxtExampleLayout example="use-meta" :show-tips="true">
|
|
<div
|
|
class="bg-gray-400/10 border-2 border-dashed border-gray-400/50 rounded-xl py-8 px-2 op-80"
|
|
>
|
|
There are renderless <code><Html></code>, <code><Meta></code>, <code><Title></code> components
|
|
<br>that can magically bind the meta using Vue template.
|
|
</div>
|
|
|
|
<Html :lang="String(dynamic)">
|
|
<Head>
|
|
<Title>Luck number: {{ dynamic }}</Title>
|
|
<Meta name="description" :content="`My page's ${dynamic} description`" />
|
|
<Link rel="preload" href="/test.txt" as="script" />
|
|
</Head>
|
|
</Html>
|
|
|
|
<div class="mt-5">
|
|
<NButton @click="dynamic = Math.round(Math.random() * 100)">
|
|
Click me and see the dynamic title
|
|
</NButton>
|
|
</div>
|
|
|
|
<template #tips>
|
|
<div class="flex-auto">
|
|
Learn more about
|
|
<NLink href="https://v3.nuxtjs.org/docs/usage/meta-tags" target="_blank">
|
|
Meta tags
|
|
</NLink>.
|
|
Open in editor to see the source code 👉
|
|
</div>
|
|
</template>
|
|
</NuxtExampleLayout>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
setup () {
|
|
useMeta({
|
|
bodyAttrs: {
|
|
class: 'test'
|
|
}
|
|
})
|
|
return { dynamic: ref(49) }
|
|
},
|
|
head: {
|
|
title: 'Another title'
|
|
}
|
|
}
|
|
</script>
|