vite-plugin-translate

0.0.6 verified Mon Apr 27 auth: no javascript

Vite plugin that integrates translate.js for automatic website translation. Current stable version is 0.0.6, with initial release in 2024. It handles bundling the translate.js library, emitting it to the build output with version/timestamp in filename, and injecting script tags into HTML. Supports translate.js versions 3.18.66 and 4.0.3. Optionally injects an initialization script after translate.js loads. Requires Vite >=5 as a peer dependency. Ships TypeScript types.

Common errors

error Error: The 'version' option is required for ViteTranslatePlugin ↓

cause Missing or undefined version option in plugin configuration.

fix

Add version: '4.0.3' (or another supported version) to the plugin options.

error Cannot find module 'vite-plugin-translate' when using require() ↓

cause Using CommonJS require with default import syntax instead of destructuring.

fix

Use const { ViteTranslatePlugin } = require('vite-plugin-translate').

error TypeError: ViteTranslatePlugin is not a constructor ↓

cause Importing as default export instead of named export.

fix

Use import { ViteTranslatePlugin } from 'vite-plugin-translate'.

error Uncaught ReferenceError: translate is not defined ↓

cause Initialization script runs before translate.js is fully loaded.

fix

Ensure initializeScript is set and that it runs after the library loads (the plugin handles this automatically).

Warnings

breaking In v0.0.5, the `injectTo` option was removed. If you were using it, your config will fail silently (no error). ↓

fix Remove `injectTo` from plugin options. The plugin now injects script tags in a fixed manner.

deprecated The `initializeScript` option may be deprecated in future versions. The plugin currently injects it as a second script tag. ↓

fix No action required yet, but watch for changelogs.

gotcha Plugin only works with translate.js versions 3.18.66 and 4.0.3. Unsupported versions will cause runtime errors. ↓

fix Ensure you pass a supported version string to the `version` option.

gotcha The plugin depends on Vite >=5. Using it with Vite 4 or earlier will result in a peer dependency warning and potential incompatibility. ↓

fix Upgrade Vite to version 5 or higher.

gotcha The plugin injects scripts into the HTML automatically; disabling or overriding this may require advanced configuration. ↓

fix If you need custom script injection, consider forking the plugin or using a different approach.

Install

npm install vite-plugin-translate

yarn add vite-plugin-translate

pnpm add vite-plugin-translate

Imports

ViteTranslatePlugin

wrong

import ViteTranslatePlugin from 'vite-plugin-translate'

correct

import { ViteTranslatePlugin } from 'vite-plugin-translate'

Named export, not default export.

PluginOptions

wrong

import { PluginOptions } from 'vite-plugin-translate'

correct

import type { PluginOptions } from 'vite-plugin-translate'

PluginOptions is a type, so use `import type` in TypeScript.

require

wrong

const ViteTranslatePlugin = require('vite-plugin-translate').default

correct

const { ViteTranslatePlugin } = require('vite-plugin-translate')

CJS usage: destructure the named export, not .default.

Quickstart

Integrates translate.js into a Vite project with version and initialization script.

import { defineConfig } from 'vite'
import { ViteTranslatePlugin } from 'vite-plugin-translate'

export default defineConfig({
  plugins: [
    ViteTranslatePlugin({
      version: '4.0.3',
      initializeScript: `
        translate.language.setLocal('english');
        translate.execute();
      `,
    }),
  ],
})