DevTools

@x18n/devtools puts the x18n UI in the devtools of your app, so you do not need a separate x18n ui server. The panel is the same UI with the same pages. It reads and writes the files of the project, and it updates when the files change.

The panel loads the project from the root of the host (the Vite root). From there, x18n searches upward for a config file, as the CLI does. Install the package as a dev dependency:

pnpm add -D @x18n/devtools

Vite DevTools

Add the plugin after DevTools():

import { DevTools } from '@vitejs/devtools'
import { X18nDevtools } from '@x18n/devtools/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    DevTools(),
    X18nDevtools()
  ],
})

Start the dev server and open Vite DevTools. The x18n panel is in the dock. Vite DevTools signs you in with its own auth code. The panel then needs no other sign-in.

Nuxt DevTools

Nuxt DevTools 4 runs on Vite DevTools, so the same plugin works. Add it to the Vite config of Nuxt:

import { X18nDevtools } from '@x18n/devtools/vite'

export default defineNuxtConfig({
  devtools: { enabled: true },
  vite: {
    plugins: [
      X18nDevtools()
    ],
  },
})

A devframe hub

createX18nDevframe() returns a devframe definition. Mount it in any hub, for example viteDevframeHub from @devframes/vite/hub:

import { viteDevframeHub } from '@devframes/vite/hub'
import { createX18nDevframe } from '@x18n/devtools/devframe'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    viteDevframeHub({
      devframes: [
        createX18nDevframe()
      ]
    })
  ],
})

The hub owns the auth gate and the URL. The panel is at <hub base><id>/, for example /__devframes/x18n/.

Options

Both functions take the same options:

To open files from the panel in your editor, set LAUNCH_EDITOR, VISUAL or EDITOR before you start the dev server.