Nuxt 3

Package: @i18n/nuxt

Install

npm install @i18n/nuxt

Module setup

Register the ShipEasyI18n module in nuxt.config.ts:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@i18n/nuxt'],

  i18n: {
    i18nKey: process.env.ShipEasyI18n_KEY,
    profile: 'en:prod',
    chunk: 'index',
  },
});

The module automatically injects the inline label data on the server and hydrates the client — no manual <script> tag required.

useShipEasyI18n() composable

Use useShipEasyI18n() in any page, layout, or component:

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

<template>
  <header>
    <h1 data-label="site.title">{{ t('site.title') }}</h1>
    <nav>
      <NuxtLink to="/" data-label="nav.home">{{ t('nav.home') }}</NuxtLink>
      <NuxtLink to="/account" data-label="nav.account">{{ t('nav.account') }}</NuxtLink>
    </nav>
  </header>
</template>

The composable is auto-imported — no explicit import needed when using the Nuxt module.

Server-side rendering with $i18n

Access the ShipEasyI18n context in server routes and useAsyncData calls via $i18n:

// server/api/page-meta.get.ts
export default defineEventHandler((event) => {
  const i18n = event.context.$i18n;

  return {
    title: i18n.t('site.title'),
    description: i18n.t('site.description'),
  };
});

<script setup lang="ts">
// In a page component — runs on the server during SSR
const { data } = await useAsyncData('meta', () =>
  $fetch('/api/page-meta')
);
</script>

Profile detection

To detect the profile from a request header or cookie, override the resolveProfile option:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@i18n/nuxt'],
  i18n: {
    i18nKey: process.env.ShipEasyI18n_KEY,
    resolveProfile: (event) => {
      return getCookie(event, 'i18n_profile') ?? 'en:prod';
    },
  },
});