2021-07-15 11:28:04 +00:00
|
|
|
<template>
|
2022-04-05 14:02:29 +00:00
|
|
|
<NuxtExampleLayout example="composables/use-head">
|
2021-12-23 19:27:08 +00:00
|
|
|
<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>
|
2021-07-15 11:28:04 +00:00
|
|
|
|
2021-11-10 20:25:29 +00:00
|
|
|
<Html :lang="String(dynamic)">
|
|
|
|
|
<Head>
|
2021-12-23 19:27:08 +00:00
|
|
|
<Title>Luck number: {{ dynamic }}</Title>
|
2021-11-10 20:25:29 +00:00
|
|
|
<Meta name="description" :content="`My page's ${dynamic} description`" />
|
|
|
|
|
<Link rel="preload" href="/test.txt" as="script" />
|
2022-10-03 14:16:37 +00:00
|
|
|
<Script>console.log("hello script");</Script>
|
2021-11-10 20:25:29 +00:00
|
|
|
</Head>
|
|
|
|
|
</Html>
|
2021-07-15 11:28:04 +00:00
|
|
|
|
2021-12-23 19:27:08 +00:00
|
|
|
<div class="mt-5">
|
|
|
|
|
<NButton @click="dynamic = Math.round(Math.random() * 100)">
|
|
|
|
|
Click me and see the dynamic title
|
|
|
|
|
</NButton>
|
|
|
|
|
</div>
|
|
|
|
|
</NuxtExampleLayout>
|
|
|
|
|
</template>
|
2021-07-15 11:28:04 +00:00
|
|
|
|
2021-12-23 19:27:08 +00:00
|
|
|
<script>
|
2021-07-15 11:28:04 +00:00
|
|
|
export default {
|
|
|
|
|
setup () {
|
2022-04-05 14:02:29 +00:00
|
|
|
useHead({
|
2022-04-11 09:03:31 +00:00
|
|
|
titleTemplate: '%s - useHead example',
|
2021-07-15 11:28:04 +00:00
|
|
|
bodyAttrs: {
|
|
|
|
|
class: 'test'
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
return { dynamic: ref(49) }
|
|
|
|
|
},
|
|
|
|
|
head: {
|
|
|
|
|
title: 'Another title'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
