Registry / web-framework / vite-i18n-by-design

vite-i18n-by-design

library1.1.3jsnpmunverified

A Vite plugin that automatically loads and merges Vue I18n messages from a structured locales/<lang>/<namespace> folder, supporting JSON, YAML, and YML files with full HMR and TypeScript types. Current stable version 1.1.3. Maintained as needed. Key differentiator: zero-config virtual module 'virtual:i18n-messages' that integrates directly with vue-i18n and provides type safety. Recommended over static message loading for development due to HMR support.

web-framework

npm install vite-i18n-by-design

package ↗

INSTALL

IMPORT

SIG · VITE-I18N-BY-DESIG

vite-i18n-by-design

web-frameworkjavascriptv1.1.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import i18nLoaderPlugin from 'vite-i18n-by-design';

✗ import { i18nLoaderPlugin } from 'vite-i18n-by-design';

Default export only; named export does not exist.

virtual:i18n-messages

✓ import messages from 'virtual:i18n-messages';

Virtual module provided by the plugin; must be used with Vite. Type declarations included in package.

loadMessages

✓ import { loadMessages } from 'vite-i18n-by-design';

✗ import loadMessages from 'vite-i18n-by-design';

Named export for Node.js script usage; not suitable for browser or HMR.

Configures the Vite plugin, creates a vue-i18n instance with virtual messages, and mounts the app.

// vite.config.ts import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import i18nLoaderPlugin from 'vite-i18n-by-design' export default defineConfig({ plugins: [ vue(), i18nLoaderPlugin({ localesDir: 'locales' }) ] }) // src/i18n.ts import { createI18n } from 'vue-i18n' import messages from 'virtual:i18n-messages' export const i18n = createI18n({ legacy: false, locale: 'fr', fallbackLocale: 'en', messages }) // main.ts import { createApp } from 'vue' import { i18n } from './i18n' import App from './App.vue' createApp(App).use(i18n).mount('#app')

Debug

Known issues

deprecatedTypeScript declarations for virtual:i18n-messages require manual inclusion in tsconfig if auto-resolution fails.

fix

Add 'node_modules/vite-i18n-by-design/dist/virtual-i18n-messages.d.ts' to the include array in tsconfig.app.json.

affects: >=1.0.0

gotchaVirtual module 'virtual:i18n-messages' is not available in Node.js scripts (SSR, testing without Vite).

fix

Use the named export 'loadMessages' from the package for Node.js usage.

affects: >=1.0.0

gotchaYAML files require the 'yaml' package to be installed; missing it causes runtime errors.

fix

Run 'npm install yaml' as a project dependency.

affects: >=1.0.0

gotchaFolder structure must be locales/<lang>/<namespace>.* without extra nesting; deeper structures are not supported.

fix

Flatten your locale files to the specified pattern.

affects: >=1.0.0

Errors

Common errors & fixes

Cannot find module 'virtual:i18n-messages' or its corresponding type declarations.

TypeScript does not recognize the virtual module by default.

fix

Add the provided .d.ts file to your tsconfig include array, or use a path mapping.

Error: Cannot find module 'yaml'

YAML dependency not installed when using YAML files.

fix

Install yaml: npm install yaml

TypeError: Messages must be an object or a function that returns an object.

Invalid message structure after merging; likely nested incorrectly.

fix

Ensure each locale folder contains namespace files (e.g., locales/en/app.json), not direct message files.

Upgrade

Version history

1.1.3latest on npm

Audit

Dependencies

vue-i18nrequiredThe plugin generates messages for vue-i18n; must be installed in the project.

yamloptionalUsed internally to parse YAML files. Not a peer dependency, but may need to be installed if not already available.

Agent activity

4 hits · last 30 days

node

Resources

packagehttps://www.npmjs.com/package/vite-i18n-by-design ↗