nuxt-i18n-inspector

Point at any text in your Nuxt app. See the translation key that made it.

This is the Nuxt module for i18n-key-inspector. The inspector rewrites the loaded catalogue, so every message carries its key as an invisible prefix. It then reads that prefix back from the DOM. The key travels inside the string, so it survives v-html, attributes, and a section that hydrates long after the first paint.

Development only by default. A build registers nothing, so the inspector cannot reach your users by accident. Set enabled: true to keep it on a staging site.

Install

npx nuxi module add nuxt-i18n-inspector

Or by hand:

npm install --save-dev nuxt-i18n-inspector

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n', 'nuxt-i18n-inspector'],
})

Use it

Press Alt three times. Option on a Mac. A label appears in the corner, and the mode is on.

Then hold the same key. Every translated string lights up, and the one under the pointer shows its key. Hold the key and click to copy it. Three presses turn the mode off.

Until you press it, the module leaves the page alone.

Options

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n', 'nuxt-i18n-inspector'],

  i18nInspector: {
    keySeparator: '::',
    skipGroups: ['seo'],
    listSeparators: [',,'],
  },
})

| Option | Default | Purpose | | --- | --- | --- | | enabled | true in dev | Register the inspector. true in a build keeps it on staging | | activationKey | 'Alt' | Key to press, and then to hold | | activationPresses | 3 | How many presses turn the mode on | | activationWindowMs | 600 | How long one gap between presses may be | | keySeparator | '.' | What joins the parts of a key in the tooltip | | skipGroups | [] | Top-level groups to leave alone | | skipNestedGroups | [] | Group names one level in to leave alone | | listSeparators | [] | Separators your app splits one message on | | badge | true | Whether a corner label says the mode is on |

Which strings to skip

Skip copy that reaches only <title> and <meta>. Nobody can point at it, and a marked title travels into the analytics pageview. skipGroups: ['seo'] covers a top-level seo group. skipNestedGroups: ['meta'] covers a meta group that sits beside the strings of each page.

Copy that your app splits

A plural needs no configuration. The | in one note | {n} notes belongs to vue-i18n, and both branches get the key.

A list that your own code splits does need it. FAQ questions joined by ,, in one message become several nodes on the page. Pass listSeparators: [',,'], and every item carries the key.

What it works with

• Nuxt 3.21 and later, and Nuxt 4. CI prepares the playground on both.
• @nuxtjs/i18n 10, in both the composition and the legacy mode. Versions 8 and 9 use the same plugin name and the same Composer shapes, so they should work. CI does not test them yet.

Limits

• A message that holds no literal text gets no key. There is nothing to carry the marker.
• A component that calls t() once, outside a reactive scope, keeps the text it read when it was built. Those strings stay untagged until it is built again.
• Editing a locale file with the mode on shows the new text for a moment, then the next pass restores the snapshot. Turn the mode off and on to pick it up.

Development

pnpm install
pnpm dev       # the playground on http://localhost:3000
pnpm verify    # format, comments, types, tests, build

License

MIT