Reactive page title

April 21, 2026 · View on GitHub

support support

Reactive page title

Change document.title on the fly in Meteor.js apps via flow-router-extra API.

ToC

Features

  • 👨‍🔬 100% tests coverage
  • ✨ Use prefixes for groups, including nesting
  • 🎛 Per route, per group, and default (all routes) title tag

Various ways to set title, ordered by priority:

  • FlowRouter.route() [overrides all below]
  • FlowRouter.group()
  • FlowRouter.globals
  • Head template <title>Text</title> tag [superseded by any above]

Installation

meteor add ostrio:flow-router-title

Compatibility

  • Meteor >=1.4, including latest Meteor 3.4;
  • Requires ostrio:flow-router-extra@3.14.0+.

Demos

ES6 Import

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

AGENTS.md

The repo ships AGENTS.md: a compact implementation map for ostrio:flow-router-title. It complements API in this document.

SKILLS.md

  • The main ostrio:flow-router-extra package ships a bundled skill at .agents/skills/meteor-flow-router/SKILL.md (covers ostrio:flow-router-extra, ostrio:flow-router-meta, ostrio:flow-router-title). Install into your project with the Skills CLI (npx skills):
# From a Meteor app repo (install into that app’s .agents/skills for Cursor, etc.)
npx skills add veliovgroup/flow-router --skill meteor-flow-router

# Only list skills discovered in the Flow Router repo (no install)
npx skills add veliovgroup/flow-router --list

# User-global Cursor skills dir (~/.cursor/skills)
npx skills add veliovgroup/flow-router --skill meteor-flow-router --agent cursor --global --yes

TypeScript

  • Package ships index.d.ts as a Meteor asset. Apps using zodern:types resolve typings for meteor/ostrio:flow-router-title automatically.
  • Import only from client code (same as this package’s mainModule).
  • Constructor expects FlowRouter from meteor/ostrio:flow-router-extra (Router type). Route / group options use title, titlePrefix as in the API section.
import { FlowRouter } from 'meteor/ostrio:flow-router-extra';
import { FlowRouterTitle } from 'meteor/ostrio:flow-router-title';

const titles = new FlowRouterTitle(FlowRouter);
titles.set('My title');

flow-router-title performs the best when used with the next packages:

  • flow-router-meta - Per route meta tags, script, and link (e.g. CSS) — set per-route meta-tags, stylesheets, and scripts
  • flow-router-extra - Carefully extended FlowRouter

API

  • new FlowRouterTitle(FlowRouter) — The main FlowRouterTitle constructor that accepts FlowRouter as the only argument
  • FlowRouterTitle#set(title: string) — The only method that changes document.title during runtime

After new FlowRouterTitle(FlowRouter) instance is initiated it extends FlowRouter.router() and FlowRouter.group() methods and FlowRouter.globals with support of:

  • title: string — String property
  • title: function(params, qs, data) => string — Method returning string
  • titlePrefix: string — String property for page's title prefix
  • titlePrefix: function(params, qs, data) => string — Method returning string for page's title prefix

Usage

Initialize FlowRouterTitle class by passing FlowRouter object. Right after creating all routes:

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

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

const titleHandler = new FlowRouterTitle(FlowRouter);

404 / notFound compatibility

ostrio:flow-router-title supports both 404 styles in ostrio:flow-router-extra:

  • Recommended: catch-all route via FlowRouter.route('*', { title, action })
  • Legacy/deprecated API: FlowRouter.notFound = { title, action }

When both are present, latest registration wins, same as regular route registration order.

Set title via Route

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

// Set default document.title value in
// case router has no title property
FlowRouter.globals.push({
  title: 'Default title'
});

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

.set() method

Set document.title during runtime (without route(s)):

FlowRouter.route('/', {/* ... */});

const titleHandler = new FlowRouterTitle(FlowRouter);
titleHandler.set('My Awesome Title String'); // <- Returns `true`

// `.set()` method accepts {string} only
// Invalid values won't throw an exception
// instead it will simply return `false`

Function context

Use function context (with data hook):

FlowRouter.route('/post/:_id', {
  name: 'post',
  waitOn(params) {
    return [Meteor.subscribe('post', params._id)];
  },
  async data(params) {
    return await Collections.Posts.findOneAsync(params._id);
  },
  title(params, query, data) {
    if (data) {
      return data.title;
    }
    return '404: Page not found';
  }
});

Group context

Use group context:

const 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`
});

Reactive data sources

To change title reactively, just pass it as function:

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

// Use params from route
FlowRouter.route('/page/:_id/:slug', {
  name: 'somePage',
  title(params) {
    return `Page ${params.slug}`;
  }
});

More examples

In all examples below title can be a Function or String:

import { FlowRouter } from 'meteor/ostrio:flow-router-extra';

FlowRouter.globals.push({
  title() {/* ... */} // <-- Suitable for reactive data source
});

FlowRouter.globals.push({
  title: 'Title text'
});

FlowRouter.group({
  title() {/* ... */}, // <-- Suitable for reactive data source
  titlePrefix() {/* ... */} // <-- Can accept reactive data source, but won't trigger re-computation
});

FlowRouter.group({
  title: 'Title text',
  titlePrefix: 'Title prefix text'
});

FlowRouter.route('/path', {
  title() {/* ... */} // <-- Reactive
});

FlowRouter.route('/path', {
  title: 'Title text'
});

Running Tests

  1. Clone this package
  2. In Terminal (Console) go to directory where package is cloned
  3. Then run:

Meteor/Tinytest

# Default
meteor test-packages ./

# With custom port
meteor test-packages ./ --port 8888

# With local MongoDB and custom port
MONGO_URL="mongodb://127.0.0.1:27017/flow-router-title-tests" meteor test-packages ./ --port 8888

Support this project