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

docs: add info on extending the HTML template (#21615)

Browse Source
This commit is contained in:
Hebilicious 2023-06-18 04:43:17 +07:00 committed by GitHub
parent 634829a08c
commit a0c2363616
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 23 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
docs/1.getting-started/3.views.md
View File

@ -132,3 +132,26 @@ If you only have a single layout in your application, we recommend using app.vue
:: ::
If you want to create more layouts and learn how to use them in your pages, find more information in the [Layouts section](/docs/guide/directory-structure/layouts). If you want to create more layouts and learn how to use them in your pages, find more information in the [Layouts section](/docs/guide/directory-structure/layouts).
## Advanced: Extending the HTML template
::alert{type=info}
If you only need to modify the head, you can refer to the [SEO and meta section](docs/getting-started/seo-meta).
::
You can have full control over the HTML template by adding a Nitro plugin that registers a hook.
The callback function of the `render:html` hook allows you to mutate the HTML before it is sent to the client.
```ts [server/plugins/extend-html.ts]
export default defineNitroPlugin((nitroApp) => {
nitroApp.hooks.hook('render:html', (html, { event }) => {
// This will be an object representation of the html template.
console.log(html)
html.head.push(`<meta name="description" content="My custom description" />`)
})
// You can also intercept the response here.
nitroApp.hooks.hook('render:response', (response, { event }) => { console.log(response) })
})
```
:ReadMore{link="/docs/guide/going-further/hooks"}