Translate pages

VitNode uses use-intl for frontend translations. To keep pages light, a page downloads only the translation namespaces its route declares.

Declare the namespace on the routeCopy Anchor Link

Plugin routes declare the namespaces a page renders as messages in routes.ts. VitNode loads those strings together with the page's code. This is the site-notes notes page from Plugin page:

page('/site-notes/notes', {
  component: lazy(() => import('./pages/notes-page')),
  messages: ['site-notes.notes'], 
}),

Read the stringsCopy Anchor Link

Read them with useTranslations from use-intl, scoped to the same namespace:

import { useTranslations } from 'use-intl'

const NotesPage = () => {
  const t = useTranslations('site-notes.notes')

  return <h1>{t('title')}</h1>
}

export default NotesPage

Define the stringsCopy Anchor Link

Put them under the plugin's id in src/locales/en.json:

{
  "site-notes": {
    "notes": {
      "title": "Site notes",
      "empty": "No notes yet."
    }
  }
}

If a key renders as its own name, such as site-notes.notes.title, the route does not declare the namespace that holds it.

For placeholders, plurals and rich text in your strings, see Messages. For a page's <title>, translate in head with t; see Route module.

RelatedCopy Anchor Link