Head Tags
/!\ In Vulcan Next and Vulcan NPM, we don't provide Head Tags anymore, because modern frameworks already provide their own solution at app-level
You'll often need to add tags to your app's <head>
section. There are three ways to do this: using the Helmet library, using the <Components.HeadTags/>
component, or using the Head
object.
Helmetβ
You can use Helmet inside a VulcanJS app just like inside any other React app:
const Layout = ({children}) =>
<div id='wrapper'>
<Helmet>
<link name='bootstrap' rel='stylesheet' type='text/css' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css'/>
<link name='font-awesome' rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'/>
</Helmet>
<div className='main'>
{children}
</div>
</div>
registerComponent('Layout', Layout);
Components.HeadTagsβ
Using HeadTagsβ
Out of the box, a VulcanJS app adds a few default tags such as <title/>
, <meta name='description'/>
, etc. These are all added using Helmet by Components.HeadTags
(called from inside the App
component), using values provided by your settings.json
file.
In some cases, you'll want to change these values for a given page. For example, a single post page will want to have a different title than your homepage. You can do that by calling Components.HeadTags
directly anywhere inside your component tree with one or more of the following props:
title
url
image
description
<Components.HeadTags url={Posts.getPageUrl(post, true)} title={post.title} image={post.thumbnailUrl} description={post.excerpt} />
By calling HeadTags
again, you'll be calling Helmet again, which in turn will override the head tags previously set by the App
component.
Overriding Headtagsβ
Since Components.HeadTags
is a component, you can also override it completely using replaceComponent('HeadTags', MyComponent)
.
The Head Objectβ
Finally, there are also some cases where you want to add or remove a tag from outside your React components. You can do so using the Head
object.
For example. here is how the vulcan:rss
package adds an RSS feed link to the head:
import { Head, Utils } from 'meteor/vulcan:core';
Head.link.push({
name: 'rss',
rel: 'alternate',
type: 'application/rss+xml',
href: `${Utils.getSiteUrl()}feed.xml`
});
You can also remove a tag using removeFromHeadTags
:
import { removeFromHeadTags } from 'meteor/vulcan:core';
removeFromHeadTags('link', 'rss');
Head Componentsβ
You can also use the Head
object to add React components to every page of your app (this can be useful for adding analytics integrations wrapped inside React components, for example). Just push the components to Head.components
.
If you push an array (such as [myComponent, withCurrentUser]
) the array will be interpreted as a component + HoC array similar to the arguments of registerComponent
.