# Vue Helmet
[](https://coveralls.io/github/jnields/vue-helmet?branch=master)
[](https://travis-ci.org/jnields/vue-helmet)
Vue-based head manage solution inspired by [react-helmet](https://github.com/nfl/react-helmet).
## Install
This package requires a `Promise` polyfill to be provided in environments that don't support them natively, and `vue@^2.2.1`
```
npm i -S @jnields/vue-helmet
```
## example
```vue
My Title
```
Nested or latter components will override duplicate changes:
```vue
My TitleNested Title
```
outputs:
```html
Nested Title
```
See below for a full reference guide.
## Features
- Supports all valid head tags: `title`, `base`, `meta`, `link`, `script`, `noscript`, and `style` tags.
- Supports attributes for `body`, `html` and `title` tags.
- Supports server-side rendering.
- Nested components override duplicate head changes.
- Duplicate head changes are preserved when specified in the same component (support for tags like "apple-touch-icon").
- Callback for tracking DOM changes.
## Server usage
`HelmetProvider` takes an optional `context` prop, of type `Object`, that writes to state.
You can access rendered tags on the server via `context.state.link`, etc.
Assuming `App` passes its context prop along to HelmetProvider (as above), your server would look like this:
```js
// server
import { createRenderer } from 'vue-server-renderer';
const renderer = createRenderer();
app.use(async (req, res, next) => {
try {
const context = {};
const markup = await renderer.renderToString(new App({
propsData: { context }
}));
const helmet = context.state;
const html = `
${helmet.base}
${helmet.link}
${helmet.meta}
${helmet.noscript}
${helmet.script}
${helmet.style}
${helmet.title}
${markup}
`;
res.end(html);
} catch (e) {
next(e);
}
});
```
### Reference Guide
```vue
outputs:
My Site
*/}
defaultTitle="My Default Title"
{/* (optional) callback that tracks DOM changes */}
onChangeClientState={(newState, addedTags, removedTags) => console.log(newState, addedTags, removedTags)}
>
{/* html attributes */}