{"id":22570,"library":"vite-i18n-by-design","title":"vite-i18n-by-design","description":"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.","status":"active","version":"1.1.3","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","typescript"],"install":[{"cmd":"npm install vite-i18n-by-design","lang":"bash","label":"npm"},{"cmd":"yarn add vite-i18n-by-design","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-i18n-by-design","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"The plugin generates messages for vue-i18n; must be installed in the project.","package":"vue-i18n","optional":false},{"reason":"Used internally to parse YAML files. Not a peer dependency, but may need to be installed if not already available.","package":"yaml","optional":true}],"imports":[{"note":"Default export only; named export does not exist.","wrong":"import { i18nLoaderPlugin } from 'vite-i18n-by-design';","symbol":"default","correct":"import i18nLoaderPlugin from 'vite-i18n-by-design';"},{"note":"Virtual module provided by the plugin; must be used with Vite. Type declarations included in package.","wrong":"","symbol":"virtual:i18n-messages","correct":"import messages from 'virtual:i18n-messages';"},{"note":"Named export for Node.js script usage; not suitable for browser or HMR.","wrong":"import loadMessages from 'vite-i18n-by-design';","symbol":"loadMessages","correct":"import { loadMessages } from 'vite-i18n-by-design';"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\nimport i18nLoaderPlugin from 'vite-i18n-by-design'\n\nexport default defineConfig({\n  plugins: [\n    vue(),\n    i18nLoaderPlugin({ localesDir: 'locales' })\n  ]\n})\n\n// src/i18n.ts\nimport { createI18n } from 'vue-i18n'\nimport messages from 'virtual:i18n-messages'\n\nexport const i18n = createI18n({\n  legacy: false,\n  locale: 'fr',\n  fallbackLocale: 'en',\n  messages\n})\n\n// main.ts\nimport { createApp } from 'vue'\nimport { i18n } from './i18n'\nimport App from './App.vue'\n\ncreateApp(App).use(i18n).mount('#app')","lang":"typescript","description":"Configures the Vite plugin, creates a vue-i18n instance with virtual messages, and mounts the app."},"warnings":[{"fix":"Add 'node_modules/vite-i18n-by-design/dist/virtual-i18n-messages.d.ts' to the include array in tsconfig.app.json.","message":"TypeScript declarations for virtual:i18n-messages require manual inclusion in tsconfig if auto-resolution fails.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Use the named export 'loadMessages' from the package for Node.js usage.","message":"Virtual module 'virtual:i18n-messages' is not available in Node.js scripts (SSR, testing without Vite).","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Run 'npm install yaml' as a project dependency.","message":"YAML files require the 'yaml' package to be installed; missing it causes runtime errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Flatten your locale files to the specified pattern.","message":"Folder structure must be locales/<lang>/<namespace>.* without extra nesting; deeper structures are not supported.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Add the provided .d.ts file to your tsconfig include array, or use a path mapping.","cause":"TypeScript does not recognize the virtual module by default.","error":"Cannot find module 'virtual:i18n-messages' or its corresponding type declarations."},{"fix":"Install yaml: npm install yaml","cause":"YAML dependency not installed when using YAML files.","error":"Error: Cannot find module 'yaml'"},{"fix":"Ensure each locale folder contains namespace files (e.g., locales/en/app.json), not direct message files.","cause":"Invalid message structure after merging; likely nested incorrectly.","error":"TypeError: Messages must be an object or a function that returns an object."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}