tessl/npm-intlify--unplugin-vue-i18n

Unplugin that provides comprehensive Vue I18n integration capabilities for various bundlers including Vite, Webpack, and Nuxt

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Plugin Configuration

Name: tessl/npm-intlify--unplugin-vue-i18n
Author: tessl

Plugin configuration and initialization for @intlify/unplugin-vue-i18n across different bundlers with universal unplugin architecture support.

Capabilities

Main Plugin Exports

Primary plugin exports for different bundlers and use cases.

/**
 * Main unplugin instance for universal bundler support
 */
declare const unplugin: UnpluginInstance<PluginOptions | undefined, boolean>;
declare function unpluginFactory(
  options?: PluginOptions,
  meta: UnpluginContextMeta
): UnpluginOptions[];

export default unplugin;
export { unplugin, unpluginFactory };

Vite Plugin

Vite-specific plugin integration.

/**
 * Vite plugin for Vue I18n integration
 * @param options - Plugin configuration options
 * @returns Vite plugin instance
 */
declare const VitePlugin: UnpluginInstance<PluginOptions | undefined, boolean>['vite'];
export default VitePlugin;

Usage Example:

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
import path from 'path';

export default defineConfig({
  plugins: [
    vue(),
    VueI18nPlugin({
      include: [path.resolve(__dirname, './src/locales/**')],
      runtimeOnly: true,
      compositionOnly: true,
      strictMessage: false,
      escapeHtml: true
    })
  ]
});

Webpack Plugin

Webpack-specific plugin integration.

/**
 * Webpack plugin for Vue I18n integration
 * @param options - Plugin configuration options
 * @returns Webpack plugin instance
 */
declare const WebpackPlugin: UnpluginInstance<PluginOptions | undefined, boolean>['webpack'];
export default WebpackPlugin;

Usage Example:

// webpack.config.js
const VueI18nPlugin = require('@intlify/unplugin-vue-i18n/webpack');
const path = require('path');

module.exports = {
  plugins: [
    VueI18nPlugin({
      include: [path.resolve(__dirname, './src/locales/**')],
      runtimeOnly: true,
      compositionOnly: true,
      ssr: true
    })
  ]
};

Nuxt Integration

Nuxt.js framework integration support.

Usage Example:

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt';
import VueI18nPlugin from '@intlify/unplugin-vue-i18n';

export default defineNuxtConfig({
  vite: {
    plugins: [
      VueI18nPlugin.vite({
        include: ['./locales/**'],
        ssr: true
      })
    ]
  },
  // For Webpack builder
  webpack: {
    plugins: [
      VueI18nPlugin.webpack({
        include: ['./locales/**'],
        ssr: true
      })
    ]
  }
});

Configuration Options

Core Options

interface PluginOptions {
  /**
   * Pattern(s) to include i18n resource files for pre-compilation
   * Supports: .json, .json5, .yaml, .yml, .js, .ts files
   */
  include?: string | string[];
  
  /**
   * Specific locales to include in the bundle
   * Excludes other locales from the final bundle
   */
  onlyLocales?: string | string[];
  
  /**
   * Target Vue I18n module type
   * @default 'vue-i18n'
   */
  module?: VueI18nModule;
}

type VueI18nModule = 'vue-i18n' | 'petite-vue-i18n';

Build Optimization Options

interface BuildOptimizations {
  /**
   * Use Vue I18n runtime-only build for production
   * @default true
   */
  runtimeOnly?: boolean;
  
  /**
   * Tree-shake legacy API, use composition API only
   * @default true
   */
  compositionOnly?: boolean;
  
  /**
   * Install full Vue I18n API including built-in components
   * @default true
   */
  fullInstall?: boolean;
  
  /**
   * Tree-shake message compiler for smaller bundles
   * @default false
   */
  dropMessageCompiler?: boolean;
  
  /**
   * Enable SSR support for Vue I18n
   * @default false
   */
  ssr?: boolean;
}

Resource Processing Options

interface ResourceOptions {
  /**
   * Allow dynamic resource construction for JS/TS files
   * @default false
   */
  allowDynamic?: boolean;
  
  /**
   * Force stringify non-string values (numbers, booleans)
   * @default false
   */
  forceStringify?: boolean;
  
  /**
   * Default language format for SFC i18n blocks
   * @default 'json'
   */
  defaultSFCLang?: SFCLangFormat;
  
  /**
   * Make all SFC i18n blocks global scope
   * @default false
   */
  globalSFCScope?: boolean;
}

type SFCLangFormat = 'json' | 'json5' | 'yml' | 'yaml';

Security Options

interface SecurityOptions {
  /**
   * Strictly check for HTML tags in locale messages
   * @default true
   */
  strictMessage?: boolean;
  
  /**
   * Escape HTML tags in locale messages for XSS protection
   * @default false
   */
  escapeHtml?: boolean;
}

Advanced Options

interface AdvancedOptions {
  /**
   * Optimize v-t translation directive
   * @default false
   */
  optimizeTranslationDirective?: boolean | string | string[];
  
  /**
   * Custom transform function for i18n blocks
   */
  transformI18nBlock?: (src: string | Buffer) => string;
}

Complete Configuration Example

// Complete configuration example
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
import path from 'path';

VueI18nPlugin({
  // Resource inclusion
  include: [
    path.resolve(__dirname, './src/locales/**'),
    path.resolve(__dirname, './src/components/**/*.vue')
  ],
  onlyLocales: ['en', 'fr', 'de'],
  
  // Module selection
  module: 'vue-i18n',
  
  // Build optimizations
  runtimeOnly: true,
  compositionOnly: true,
  fullInstall: false,
  dropMessageCompiler: true,
  ssr: false,
  
  // Resource processing
  allowDynamic: false,
  forceStringify: true,
  defaultSFCLang: 'yaml',
  globalSFCScope: false,
  
  // Security
  strictMessage: false,
  escapeHtml: true,
  
  // Advanced features
  optimizeTranslationDirective: true,
  transformI18nBlock: (src) => {
    // Custom transformation logic
    return processI18nBlock(src);
  }
});