Vue 3

ShipEasyI18n integration for Vue 3 apps — useShipEasyI18n() composable, ShipEasyI18nString component, and optional Pinia plugin for global label state.

Package: @i18n/vue

Install

npm install @i18n/vue

Script tag

Add the loader to <head> in your index.html before the app bundle:

<!-- index.html -->
<head>
  <script
    src="https://cdn.i18n.shipeasy.ai/v1/loader.js"
    data-key="i18n_pk_your_key_here"
    data-profile="en:prod"
    async
  ></script>
</head>

Plugin setup

// main.ts
import { createApp } from 'vue';
import { ShipEasyI18nPlugin } from '@i18n/vue';
import App from './App.vue';

const app = createApp(App);
app.use(ShipEasyI18nPlugin);
app.mount('#app');

`useShipEasyI18n()` composable

<script setup lang="ts">
import { useShipEasyI18n } from '@i18n/vue';

const { t, ready, locale } = useShipEasyI18n();
</script>

<template>
  <h1 data-label="user.greeting">{{ t('user.greeting') }}</h1>
  <p v-if="!ready">Loading labels…</p>
</template>

`ShipEasyI18nString` component

Declarative alternative — no composable needed:

<script setup lang="ts">
import { ShipEasyI18nString } from '@i18n/vue';
</script>

<template>
  <nav>
    <ShipEasyI18nString label-key="nav.home" />
    <ShipEasyI18nString label-key="nav.signIn" />
  </nav>
</template>

ShipEasyI18nString renders a <span data-label="..."> with the translated text.

Pinia plugin

If your project uses Pinia, install the optional store plugin to expose labels app-wide:

// main.ts
import { createPinia } from 'pinia';
import { i18nPiniaPlugin } from '@i18n/vue/pinia';

const pinia = createPinia();
pinia.use(i18nPiniaPlugin);
app.use(pinia);

Then access labels from any store or component via useShipEasyI18nStore().

For the full implementation spec including package source code and edge cases, see plans/frameworks/vue.md in the repository.