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

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(`<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"}