Skip to content

Commit

Permalink
docs: small changes
Browse files Browse the repository at this point in the history
  • Loading branch information
danielroe committed Jun 17, 2023
1 parent 0cd17c6 commit 8a789c5
Showing 1 changed file with 6 additions and 16 deletions.
22 changes: 6 additions & 16 deletions docs/1.getting-started/3.views.md
Original file line number Diff line number Diff line change
Expand Up @@ -133,35 +133,25 @@ 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
## 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 register a hook.
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 }) => {
console.log(html) //This will be an object representation of the html template.
html.head.push(`<meta name="description" content="My custom description" />`)
})
// 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) })
})
```

The same hooks are also available through the nuxt config.

```ts [nuxt.config.ts]
export default defineNuxtConfig({
hooks: {
'render:html': (html, { event }) => { console.log({ html }) },
'render:response': (response, { event }) => { console.log(response) },
},
})
```

:ReadMore{link="/docs/guide/going-further/hooks"}

0 comments on commit 8a789c5

Please sign in to comment.