Change document.title (page title) on the fly within flow-router

flow-router, meteor, meteor-package, meteorjs, page-title, seo, seo-meta, title
meteor add ostrio:flow-router-title@=2.1.7


Reactive page title for Meteor and flow-router-extra

Change document.title on the fly within flow-router-extra

Important Notice: This package oriented to work with flow-router-extra. It is extended fork of kadira:flow-router.

This package supports title option defined in list below, ordered by prioritization:

  • FlowRouter.route() [overrides all]
  • FlowRouter.group()
  • FlowRouter.globals
  • <title>Text</title>[might be overridden by any above]

This package tested and works like a charm with most common Meteor's packages:


meteor add ostrio:flow-router-title

Demo Application:

ES6 Import:

import { FlowRouterTitle } from 'meteor/ostrio:flow-router-title';


You need to initialize FlowRouterTitle class by passing FlowRouter object. Right after creating all your routes:

FlowRouter.route('/', {
  action: function () { /* ... */ },
  title: "Title"
  /* ... */

new FlowRouterTitle(FlowRouter);

Set title property in route's or group's configuration:

// Set default document.title value in 
// case router has no title property
  title: 'Default title'

FlowRouter.route('/me/account', {
  name: 'account',
  title: 'My Account'

Use function context (with data hook):

FlowRouter.route('/post/:_id', {
  name: 'post',
  waitOn: function(params) {
    return [Meteor.subscribe('post', params._id)];
  data: function(params) {
    return Collection.Posts.findOne(params._id);
  title: function(params, query, data) {
    if (data == null) {
      data = {};
    if (data) {
      return data.title;
    } else {
      return '404: Page not found';

Use group context:

var account = FlowRouter.group({
  prefix: '/account',
  title: "Account",
  titlePrefix: 'Account > '

account.route('/', {
  name: 'accountIndex' // Title will be `Account`

account.route('/settings', {
  name: 'AccountSettings',
  title: 'My Settings' // Title will be `Account > My Settings`

To change title reactively, just pass it as function:

FlowRouter.route('/me/account', {
  name: 'account',
  title: function() {
    // In this example we used `ostrio:i18n` package
    return i18n.get('account.document.title'); 

// Use params from route
FlowRouter.route('/page/:something', {
  name: 'somePage',
  title: function(params) {
    return "Page " + params.something;

All examples above is supported to be a function or text:

  • FlowRouter.globals.push({title: function(){...}})
  • FlowRouter.globals.push({title: 'Title text'})
  • FlowRouter.group({title: function(){...}, titlePrefix: function(){...}})
  • FlowRouter.group({title: 'Title text', titlePrefix: 'Title prefix text'})
  • FlowRouter.route('/path', {title: function(){...}})
  • FlowRouter.route('/path', {title: 'Title text'})