@nuxt/docs 0.0.0 → 3.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (224) hide show
  1. package/.navigation.yml +2 -0
  2. package/1.getting-started/.navigation.yml +3 -0
  3. package/1.getting-started/01.introduction.md +81 -0
  4. package/1.getting-started/02.installation.md +109 -0
  5. package/1.getting-started/03.configuration.md +226 -0
  6. package/1.getting-started/04.views.md +163 -0
  7. package/1.getting-started/05.assets.md +48 -0
  8. package/1.getting-started/06.styling.md +565 -0
  9. package/1.getting-started/07.routing.md +149 -0
  10. package/1.getting-started/08.seo-meta.md +360 -0
  11. package/1.getting-started/09.transitions.md +473 -0
  12. package/1.getting-started/10.data-fetching.md +795 -0
  13. package/1.getting-started/11.state-management.md +223 -0
  14. package/1.getting-started/12.error-handling.md +233 -0
  15. package/1.getting-started/13.server.md +94 -0
  16. package/1.getting-started/14.layers.md +92 -0
  17. package/1.getting-started/15.prerendering.md +194 -0
  18. package/1.getting-started/16.deployment.md +130 -0
  19. package/1.getting-started/17.testing.md +728 -0
  20. package/1.getting-started/18.upgrade.md +997 -0
  21. package/2.guide/.navigation.yml +2 -0
  22. package/2.guide/0.index.md +22 -0
  23. package/2.guide/1.concepts/.navigation.yml +3 -0
  24. package/2.guide/1.concepts/1.auto-imports.md +205 -0
  25. package/2.guide/1.concepts/10.nuxt-lifecycle.md +141 -0
  26. package/2.guide/1.concepts/2.vuejs-development.md +103 -0
  27. package/2.guide/1.concepts/3.rendering.md +255 -0
  28. package/2.guide/1.concepts/4.server-engine.md +62 -0
  29. package/2.guide/1.concepts/5.modules.md +48 -0
  30. package/2.guide/1.concepts/7.esm.md +299 -0
  31. package/2.guide/1.concepts/8.typescript.md +97 -0
  32. package/2.guide/1.concepts/9.code-style.md +22 -0
  33. package/2.guide/2.directory-structure/.navigation.yml +3 -0
  34. package/2.guide/2.directory-structure/0.nuxt.md +20 -0
  35. package/2.guide/2.directory-structure/0.output.md +18 -0
  36. package/2.guide/2.directory-structure/1.assets.md +16 -0
  37. package/2.guide/2.directory-structure/1.components.md +608 -0
  38. package/2.guide/2.directory-structure/1.composables.md +121 -0
  39. package/2.guide/2.directory-structure/1.content.md +64 -0
  40. package/2.guide/2.directory-structure/1.layouts.md +180 -0
  41. package/2.guide/2.directory-structure/1.middleware.md +209 -0
  42. package/2.guide/2.directory-structure/1.modules.md +66 -0
  43. package/2.guide/2.directory-structure/1.node_modules.md +12 -0
  44. package/2.guide/2.directory-structure/1.pages.md +440 -0
  45. package/2.guide/2.directory-structure/1.plugins.md +299 -0
  46. package/2.guide/2.directory-structure/1.public.md +27 -0
  47. package/2.guide/2.directory-structure/1.server.md +546 -0
  48. package/2.guide/2.directory-structure/1.shared.md +104 -0
  49. package/2.guide/2.directory-structure/1.utils.md +49 -0
  50. package/2.guide/2.directory-structure/2.env.md +75 -0
  51. package/2.guide/2.directory-structure/2.gitignore.md +37 -0
  52. package/2.guide/2.directory-structure/2.nuxtignore.md +36 -0
  53. package/2.guide/2.directory-structure/2.nuxtrc.md +50 -0
  54. package/2.guide/2.directory-structure/3.app-config.md +177 -0
  55. package/2.guide/2.directory-structure/3.app.md +72 -0
  56. package/2.guide/2.directory-structure/3.error.md +55 -0
  57. package/2.guide/2.directory-structure/3.nuxt-config.md +34 -0
  58. package/2.guide/2.directory-structure/3.package.md +32 -0
  59. package/2.guide/2.directory-structure/3.tsconfig.md +24 -0
  60. package/2.guide/3.going-further/.navigation.yml +3 -0
  61. package/2.guide/3.going-further/1.experimental-features.md +689 -0
  62. package/2.guide/3.going-further/1.features.md +103 -0
  63. package/2.guide/3.going-further/1.internals.md +81 -0
  64. package/2.guide/3.going-further/10.runtime-config.md +174 -0
  65. package/2.guide/3.going-further/11.nightly-release-channel.md +68 -0
  66. package/2.guide/3.going-further/2.hooks.md +98 -0
  67. package/2.guide/3.going-further/3.modules.md +811 -0
  68. package/2.guide/3.going-further/4.kit.md +51 -0
  69. package/2.guide/3.going-further/6.nuxt-app.md +64 -0
  70. package/2.guide/3.going-further/7.layers.md +227 -0
  71. package/2.guide/3.going-further/9.debugging.md +115 -0
  72. package/2.guide/3.going-further/index.md +4 -0
  73. package/2.guide/4.recipes/.navigation.yml +3 -0
  74. package/2.guide/4.recipes/1.custom-routing.md +181 -0
  75. package/2.guide/4.recipes/2.vite-plugin.md +65 -0
  76. package/2.guide/4.recipes/3.custom-usefetch.md +125 -0
  77. package/2.guide/4.recipes/4.sessions-and-authentication.md +203 -0
  78. package/3.api/.navigation.yml +3 -0
  79. package/3.api/1.components/.navigation.yml +3 -0
  80. package/3.api/1.components/1.client-only.md +76 -0
  81. package/3.api/1.components/1.dev-only.md +51 -0
  82. package/3.api/1.components/1.nuxt-client-fallback.md +80 -0
  83. package/3.api/1.components/10.nuxt-picture.md +27 -0
  84. package/3.api/1.components/11.teleports.md +40 -0
  85. package/3.api/1.components/12.nuxt-route-announcer.md +56 -0
  86. package/3.api/1.components/13.nuxt-time.md +173 -0
  87. package/3.api/1.components/2.nuxt-page.md +154 -0
  88. package/3.api/1.components/3.nuxt-layout.md +156 -0
  89. package/3.api/1.components/4.nuxt-link.md +322 -0
  90. package/3.api/1.components/5.nuxt-loading-indicator.md +50 -0
  91. package/3.api/1.components/6.nuxt-error-boundary.md +65 -0
  92. package/3.api/1.components/7.nuxt-welcome.md +25 -0
  93. package/3.api/1.components/8.nuxt-island.md +70 -0
  94. package/3.api/1.components/9.nuxt-img.md +43 -0
  95. package/3.api/2.composables/.navigation.yml +3 -0
  96. package/3.api/2.composables/on-prehydrate.md +60 -0
  97. package/3.api/2.composables/use-app-config.md +19 -0
  98. package/3.api/2.composables/use-async-data.md +212 -0
  99. package/3.api/2.composables/use-cookie.md +233 -0
  100. package/3.api/2.composables/use-error.md +32 -0
  101. package/3.api/2.composables/use-fetch.md +217 -0
  102. package/3.api/2.composables/use-head-safe.md +55 -0
  103. package/3.api/2.composables/use-head.md +69 -0
  104. package/3.api/2.composables/use-hydration.md +68 -0
  105. package/3.api/2.composables/use-lazy-async-data.md +47 -0
  106. package/3.api/2.composables/use-lazy-fetch.md +55 -0
  107. package/3.api/2.composables/use-loading-indicator.md +77 -0
  108. package/3.api/2.composables/use-nuxt-app.md +294 -0
  109. package/3.api/2.composables/use-nuxt-data.md +112 -0
  110. package/3.api/2.composables/use-preview-mode.md +118 -0
  111. package/3.api/2.composables/use-request-event.md +23 -0
  112. package/3.api/2.composables/use-request-fetch.md +52 -0
  113. package/3.api/2.composables/use-request-header.md +34 -0
  114. package/3.api/2.composables/use-request-headers.md +37 -0
  115. package/3.api/2.composables/use-request-url.md +41 -0
  116. package/3.api/2.composables/use-response-header.md +48 -0
  117. package/3.api/2.composables/use-route-announcer.md +60 -0
  118. package/3.api/2.composables/use-route.md +52 -0
  119. package/3.api/2.composables/use-router.md +92 -0
  120. package/3.api/2.composables/use-runtime-config.md +142 -0
  121. package/3.api/2.composables/use-runtime-hook.md +43 -0
  122. package/3.api/2.composables/use-seo-meta.md +80 -0
  123. package/3.api/2.composables/use-server-seo-meta.md +27 -0
  124. package/3.api/2.composables/use-state.md +48 -0
  125. package/3.api/3.utils/$fetch.md +98 -0
  126. package/3.api/3.utils/.navigation.yml +3 -0
  127. package/3.api/3.utils/abort-navigation.md +73 -0
  128. package/3.api/3.utils/add-route-middleware.md +88 -0
  129. package/3.api/3.utils/call-once.md +92 -0
  130. package/3.api/3.utils/clear-error.md +29 -0
  131. package/3.api/3.utils/clear-nuxt-data.md +23 -0
  132. package/3.api/3.utils/clear-nuxt-state.md +23 -0
  133. package/3.api/3.utils/create-error.md +55 -0
  134. package/3.api/3.utils/define-nuxt-component.md +53 -0
  135. package/3.api/3.utils/define-nuxt-route-middleware.md +67 -0
  136. package/3.api/3.utils/define-page-meta.md +234 -0
  137. package/3.api/3.utils/define-route-rules.md +52 -0
  138. package/3.api/3.utils/navigate-to.md +230 -0
  139. package/3.api/3.utils/on-before-route-leave.md +11 -0
  140. package/3.api/3.utils/on-before-route-update.md +11 -0
  141. package/3.api/3.utils/on-nuxt-ready.md +25 -0
  142. package/3.api/3.utils/prefetch-components.md +28 -0
  143. package/3.api/3.utils/preload-components.md +23 -0
  144. package/3.api/3.utils/preload-route-components.md +41 -0
  145. package/3.api/3.utils/prerender-routes.md +46 -0
  146. package/3.api/3.utils/refresh-cookie.md +46 -0
  147. package/3.api/3.utils/refresh-nuxt-data.md +91 -0
  148. package/3.api/3.utils/reload-nuxt-app.md +74 -0
  149. package/3.api/3.utils/set-page-layout.md +24 -0
  150. package/3.api/3.utils/set-response-status.md +36 -0
  151. package/3.api/3.utils/show-error.md +31 -0
  152. package/3.api/3.utils/update-app-config.md +27 -0
  153. package/3.api/4.commands/.navigation.yml +3 -0
  154. package/3.api/4.commands/add.md +112 -0
  155. package/3.api/4.commands/analyze.md +41 -0
  156. package/3.api/4.commands/build-module.md +42 -0
  157. package/3.api/4.commands/build.md +46 -0
  158. package/3.api/4.commands/cleanup.md +38 -0
  159. package/3.api/4.commands/dev.md +59 -0
  160. package/3.api/4.commands/devtools.md +38 -0
  161. package/3.api/4.commands/generate.md +41 -0
  162. package/3.api/4.commands/info.md +33 -0
  163. package/3.api/4.commands/init.md +46 -0
  164. package/3.api/4.commands/module.md +84 -0
  165. package/3.api/4.commands/prepare.md +36 -0
  166. package/3.api/4.commands/preview.md +43 -0
  167. package/3.api/4.commands/typecheck.md +42 -0
  168. package/3.api/4.commands/upgrade.md +37 -0
  169. package/3.api/5.kit/.navigation.yml +3 -0
  170. package/3.api/5.kit/1.modules.md +172 -0
  171. package/3.api/5.kit/10.runtime-config.md +27 -0
  172. package/3.api/5.kit/10.templates.md +283 -0
  173. package/3.api/5.kit/11.nitro.md +409 -0
  174. package/3.api/5.kit/12.resolving.md +268 -0
  175. package/3.api/5.kit/13.logging.md +65 -0
  176. package/3.api/5.kit/14.builder.md +491 -0
  177. package/3.api/5.kit/15.examples.md +41 -0
  178. package/3.api/5.kit/2.programmatic.md +125 -0
  179. package/3.api/5.kit/3.compatibility.md +230 -0
  180. package/3.api/5.kit/4.autoimports.md +144 -0
  181. package/3.api/5.kit/5.components.md +127 -0
  182. package/3.api/5.kit/6.context.md +130 -0
  183. package/3.api/5.kit/7.pages.md +295 -0
  184. package/3.api/5.kit/8.layout.md +80 -0
  185. package/3.api/5.kit/9.plugins.md +263 -0
  186. package/3.api/6.advanced/.navigation.yml +1 -0
  187. package/3.api/6.advanced/1.hooks.md +105 -0
  188. package/3.api/6.advanced/2.import-meta.md +60 -0
  189. package/3.api/6.nuxt-config.md +12 -0
  190. package/3.api/index.md +31 -0
  191. package/5.community/.navigation.yml +3 -0
  192. package/5.community/2.getting-help.md +48 -0
  193. package/5.community/3.reporting-bugs.md +50 -0
  194. package/5.community/4.contribution.md +205 -0
  195. package/5.community/5.framework-contribution.md +142 -0
  196. package/5.community/6.roadmap.md +79 -0
  197. package/5.community/7.changelog.md +92 -0
  198. package/6.bridge/.navigation.yml +3 -0
  199. package/6.bridge/1.overview.md +137 -0
  200. package/6.bridge/10.configuration.md +96 -0
  201. package/6.bridge/2.typescript.md +46 -0
  202. package/6.bridge/3.bridge-composition-api.md +132 -0
  203. package/6.bridge/4.plugins-and-middleware.md +65 -0
  204. package/6.bridge/5.nuxt3-compatible-api.md +204 -0
  205. package/6.bridge/6.meta.md +117 -0
  206. package/6.bridge/7.runtime-config.md +38 -0
  207. package/6.bridge/8.nitro.md +102 -0
  208. package/6.bridge/9.vite.md +37 -0
  209. package/7.migration/.navigation.yml +3 -0
  210. package/7.migration/1.overview.md +24 -0
  211. package/7.migration/10.bundling.md +28 -0
  212. package/7.migration/11.server.md +17 -0
  213. package/7.migration/2.configuration.md +240 -0
  214. package/7.migration/20.module-authors.md +94 -0
  215. package/7.migration/3.auto-imports.md +18 -0
  216. package/7.migration/4.meta.md +127 -0
  217. package/7.migration/5.plugins-and-middleware.md +80 -0
  218. package/7.migration/6.pages-and-layouts.md +233 -0
  219. package/7.migration/7.component-options.md +156 -0
  220. package/7.migration/8.runtime-config.md +58 -0
  221. package/LICENSE +21 -0
  222. package/README.md +11 -0
  223. package/package.json +16 -4
  224. package/dist/.gitkeep +0 -0
package/1.getting-started/08.seo-meta.md ADDED
@@ -0,0 +1,360 @@
1
+ ---
2
+ title: SEO and Meta
3
+ description: Improve your Nuxt app's SEO with powerful head config, composables and components.
4
+ navigation.icon: i-lucide-file-search
5
+ ---
6
+
7
+ Nuxt head tag management is powered by [Unhead](https://unhead.unjs.io). It provides sensible defaults, several powerful composables
8
+ and numerous configuration options to manage your app's head and SEO meta tags.
9
+
10
+ ## Nuxt Config
11
+
12
+ Providing an [`app.head`](/docs/api/nuxt-config#head) property in your [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) allows you to statically customize the head for your entire app.
13
+
14
+ ::important
15
+ This method does not allow you to provide reactive data. We recommend to use `useHead()` in `app.vue`.
16
+ ::
17
+
18
+ It's good practice to set tags here that won't change such as your site title default, language and favicon.
19
+
20
+ ```ts twoslash [nuxt.config.ts]
21
+ export default defineNuxtConfig({
22
+ app: {
23
+ head: {
24
+ title: 'Nuxt', // default fallback title
25
+ htmlAttrs: {
26
+ lang: 'en',
27
+ },
28
+ link: [
29
+ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
30
+ ]
31
+ }
32
+ }
33
+ })
34
+ ```
35
+
36
+ You can also provide any of the keys listed below in [Types](#types).
37
+
38
+ ### Defaults Tags
39
+
40
+ Some tags are provided by Nuxt by default to ensure your website works well out of the box.
41
+
42
+ - `viewport`: `width=device-width, initial-scale=1`
43
+ - `charset`: `utf-8`
44
+
45
+ While most sites won't need to override these defaults, you can update them using the keyed shortcuts.
46
+
47
+ ```ts twoslash [nuxt.config.ts]
48
+ export default defineNuxtConfig({
49
+ app: {
50
+ head: {
51
+ // update Nuxt defaults
52
+ charset: 'utf-16',
53
+ viewport: 'width=device-width, initial-scale=1, maximum-scale=1',
54
+ }
55
+ }
56
+ })
57
+ ```
58
+
59
+ ## `useHead`
60
+
61
+ The [`useHead`](/docs/api/composables/use-head) composable function supports reactive input, allowing you to manage your head tags programmatically.
62
+
63
+ ```vue twoslash [app.vue]
64
+ <script setup lang="ts">
65
+ useHead({
66
+ title: 'My App',
67
+ meta: [
68
+ { name: 'description', content: 'My amazing site.' }
69
+ ],
70
+ bodyAttrs: {
71
+ class: 'test'
72
+ },
73
+ script: [ { innerHTML: 'console.log(\'Hello world\')' } ]
74
+ })
75
+ </script>
76
+ ```
77
+
78
+ We recommend to take a look at the [`useHead`](/docs/api/composables/use-head) and [`useHeadSafe`](/docs/api/composables/use-head-safe) composables.
79
+
80
+ ## `useSeoMeta`
81
+
82
+ The [`useSeoMeta`](/docs/api/composables/use-seo-meta) composable lets you define your site's SEO meta tags as an object with full type safety.
83
+
84
+ This helps you avoid typos and common mistakes, such as using `name` instead of `property`.
85
+
86
+ ```vue twoslash [app.vue]
87
+ <script setup lang="ts">
88
+ useSeoMeta({
89
+ title: 'My Amazing Site',
90
+ ogTitle: 'My Amazing Site',
91
+ description: 'This is my amazing site, let me tell you all about it.',
92
+ ogDescription: 'This is my amazing site, let me tell you all about it.',
93
+ ogImage: 'https://example.com/image.png',
94
+ twitterCard: 'summary_large_image',
95
+ })
96
+ </script>
97
+ ```
98
+
99
+ :read-more{to="/docs/api/composables/use-seo-meta"}
100
+
101
+ ## Components
102
+
103
+ While using [`useHead`](/docs/api/composables/use-head) is recommended in all cases, you may have a personal preference for defining your head tags in your template using components.
104
+
105
+ Nuxt provides the following components for this purpose: `<Title>`, `<Base>`, `<NoScript>`, `<Style>`, `<Meta>`, `<Link>`, `<Body>`, `<Html>` and `<Head>`. Note
106
+ the capitalization of these components ensuring we don't use invalid native HTML tags.
107
+
108
+ `<Head>` and `<Body>` can accept nested meta tags (for aesthetic reasons) but this does not affect _where_ the nested meta tags are rendered in the final HTML.
109
+
110
+ <!-- @case-police-ignore html -->
111
+
112
+ ```vue [app.vue]
113
+ <script setup lang="ts">
114
+ const title = ref('Hello World')
115
+ </script>
116
+
117
+ <template>
118
+ <div>
119
+ <Head>
120
+ <Title>{{ title }}</Title>
121
+ <Meta name="description" :content="title" />
122
+ <Style>
123
+ body { background-color: green; }
124
+ </Style>
125
+ </Head>
126
+
127
+ <h1>{{ title }}</h1>
128
+ </div>
129
+ </template>
130
+ ```
131
+
132
+ It's suggested to wrap your components in either a `<Head>` or `<Html>` components as tags will be deduped more intuitively.
133
+
134
+ ## Types
135
+
136
+ Below are the non-reactive types used for [`useHead`](/docs/api/composables/use-head), [`app.head`](/docs/api/nuxt-config#head) and components.
137
+
138
+ ```ts
139
+ interface MetaObject {
140
+ title?: string
141
+ titleTemplate?: string | ((title?: string) => string)
142
+ templateParams?: Record<string, string | Record<string, string>>
143
+ base?: Base
144
+ link?: Link[]
145
+ meta?: Meta[]
146
+ style?: Style[]
147
+ script?: Script[]
148
+ noscript?: Noscript[];
149
+ htmlAttrs?: HtmlAttributes;
150
+ bodyAttrs?: BodyAttributes;
151
+ }
152
+ ```
153
+
154
+ See [@unhead/vue](https://github.com/unjs/unhead/blob/main/packages/vue/src/types/schema.ts) for more detailed types.
155
+
156
+ ## Features
157
+
158
+ ### Reactivity
159
+
160
+ Reactivity is supported on all properties, by providing a computed value, a getter, or a reactive object.
161
+
162
+ ::code-group
163
+
164
+ ```vue twoslash [useHead]
165
+ <script setup lang="ts">
166
+ const description = ref('My amazing site.')
167
+
168
+ useHead({
169
+ meta: [
170
+ { name: 'description', content: description }
171
+ ],
172
+ })
173
+ </script>
174
+ ```
175
+
176
+ ```vue twoslash [useSeoMeta]
177
+ <script setup lang="ts">
178
+ const description = ref('My amazing site.')
179
+
180
+ useSeoMeta({
181
+ description
182
+ })
183
+ </script>
184
+ ```
185
+
186
+ ```vue [Components]
187
+ <script setup lang="ts">
188
+ const description = ref('My amazing site.')
189
+ </script>
190
+
191
+ <template>
192
+ <div>
193
+ <Meta name="description" :content="description" />
194
+ </div>
195
+ </template>
196
+ ```
197
+
198
+ ::
199
+
200
+ ### Title Template
201
+
202
+ You can use the `titleTemplate` option to provide a dynamic template for customizing the title of your site. For example, you could add the name of your site to the title of every page.
203
+
204
+ The `titleTemplate` can either be a string, where `%s` is replaced with the title, or a function.
205
+
206
+ If you want to use a function (for full control), then this cannot be set in your `nuxt.config`. It is recommended instead to set it within your `app.vue` file where it will apply to all pages on your site:
207
+
208
+ ::code-group
209
+
210
+ ```vue twoslash [useHead]
211
+ <script setup lang="ts">
212
+ useHead({
213
+ titleTemplate: (titleChunk) => {
214
+ return titleChunk ? `${titleChunk} - Site Title` : 'Site Title';
215
+ }
216
+ })
217
+ </script>
218
+ ```
219
+
220
+ ::
221
+
222
+ Now, if you set the title to `My Page` with [`useHead`](/docs/api/composables/use-head) on another page of your site, the title would appear as 'My Page - Site Title' in the browser tab. You could also pass `null` to default to 'Site Title'.
223
+
224
+ ### Template Params
225
+
226
+ You can use `templateParams` to provide additional placeholders in your `titleTemplate` besides the default `%s`. This allows for more dynamic title generation.
227
+
228
+ ::code-group
229
+
230
+ ```vue twoslash [useHead]
231
+ <script setup lang="ts">
232
+ useHead({
233
+ titleTemplate: (titleChunk) => {
234
+ return titleChunk ? `${titleChunk} %separator %siteName` : '%siteName';
235
+ },
236
+ templateParams: {
237
+ siteName: 'Site Title',
238
+ separator: '-'
239
+ }
240
+ })
241
+ </script>
242
+ ```
243
+
244
+ ::
245
+
246
+ ### Body Tags
247
+
248
+ You can use the `tagPosition: 'bodyClose'` option on applicable tags to append them to the end of the `<body>` tag.
249
+
250
+ For example:
251
+
252
+ ```vue twoslash
253
+ <script setup lang="ts">
254
+ useHead({
255
+ script: [
256
+ {
257
+ src: 'https://third-party-script.com',
258
+ // valid options are: 'head' | 'bodyClose' | 'bodyOpen'
259
+ tagPosition: 'bodyClose'
260
+ }
261
+ ]
262
+ })
263
+ </script>
264
+ ```
265
+
266
+ ## Examples
267
+
268
+ ### With `definePageMeta`
269
+
270
+ Within your [`pages/` directory](/docs/guide/directory-structure/pages), you can use `definePageMeta` along with [`useHead`](/docs/api/composables/use-head) to set metadata based on the current route.
271
+
272
+ For example, you can first set the current page title (this is extracted at build time via a macro, so it can't be set dynamically):
273
+
274
+ ```vue twoslash [pages/some-page.vue]
275
+ <script setup lang="ts">
276
+ definePageMeta({
277
+ title: 'Some Page'
278
+ })
279
+ </script>
280
+ ```
281
+
282
+ And then in your layout file, you might use the route's metadata you have previously set:
283
+
284
+ ```vue twoslash [layouts/default.vue]
285
+ <script setup lang="ts">
286
+ const route = useRoute()
287
+
288
+ useHead({
289
+ meta: [{ property: 'og:title', content: `App Name - ${route.meta.title}` }]
290
+ })
291
+ </script>
292
+ ```
293
+
294
+ :link-example{to="/docs/examples/features/meta-tags"}
295
+
296
+ :read-more{to="/docs/guide/directory-structure/pages/#page-metadata"}
297
+
298
+ ### Dynamic Title
299
+
300
+ In the example below, `titleTemplate` is set either as a string with the `%s` placeholder or as a `function`, which allows greater flexibility in setting the page title dynamically for each route of your Nuxt app:
301
+
302
+ ```vue twoslash [app.vue]
303
+ <script setup lang="ts">
304
+ useHead({
305
+ // as a string,
306
+ // where `%s` is replaced with the title
307
+ titleTemplate: '%s - Site Title',
308
+ })
309
+ </script>
310
+ ```
311
+
312
+ ```vue twoslash [app.vue]
313
+ <script setup lang="ts">
314
+ useHead({
315
+ // or as a function
316
+ titleTemplate: (productCategory) => {
317
+ return productCategory
318
+ ? `${productCategory} - Site Title`
319
+ : 'Site Title'
320
+ }
321
+ })
322
+ </script>
323
+ ```
324
+
325
+ `nuxt.config` is also used as an alternative way of setting the page title. However, `nuxt.config` does not allow the page title to be dynamic. Therefore, it is recommended to use `titleTemplate` in the `app.vue` file to add a dynamic title, which is then applied to all routes of your Nuxt app.
326
+
327
+ ### External CSS
328
+
329
+ The example below shows how you might enable Google Fonts using either the `link` property of the [`useHead`](/docs/api/composables/use-head) composable or using the `<Link>` component:
330
+
331
+ ::code-group
332
+
333
+ ```vue twoslash [useHead]
334
+ <script setup lang="ts">
335
+ useHead({
336
+ link: [
337
+ {
338
+ rel: 'preconnect',
339
+ href: 'https://fonts.googleapis.com'
340
+ },
341
+ {
342
+ rel: 'stylesheet',
343
+ href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap',
344
+ crossorigin: ''
345
+ }
346
+ ]
347
+ })
348
+ </script>
349
+ ```
350
+
351
+ ```vue [Components]
352
+ <template>
353
+ <div>
354
+ <Link rel="preconnect" href="https://fonts.googleapis.com" />
355
+ <Link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" crossorigin="" />
356
+ </div>
357
+ </template>
358
+ ```
359
+
360
+ ::