diff --git a/docs/1.getting-started/3.views.md b/docs/1.getting-started/3.views.md index dee27d5e22ff..adc6d0fa21b3 100644 --- a/docs/1.getting-started/3.views.md +++ b/docs/1.getting-started/3.views.md @@ -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). + +## 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(``) + }) + // You can also intercept the response here. + nitroApp.hooks.hook('render:response', (response, { event }) => { console.log(response) }) +}) +``` + +:ReadMore{link="/docs/guide/going-further/hooks"}