Nuxt i18n data module

This nuxt 3 module can be used to load locale messages in the vue-i18n instance. The api configured in the config will be called initial after nuxt build and can be called again via plugin that is provided by this module - access via $i18nData

• ✨  Release Notes

Features

• ⛰  Nuxt 3 module using the newest version of @nuxtjs/i18n
• ⛰  Nuxt plugin ($i18nData)
• 🚠  Local json files for vue-i18n are not needed
• 🚠  Use your own custom api oder the googlesheet integration to load the locale data
• 🌲  Typescript friendly

Quick Setup

1. Add nuxt-i18n-data dependency to your project

# Using pnpm
pnpm add -D nuxt-i18n-data

# Using yarn
yarn add --dev nuxt-i18n-data

# Using npm
npm install --save-dev nuxt-i18n-data

2. Add nuxt-i18n-data to the modules section of nuxt.config.ts

import { Buffer } from 'node:buffer'

export default defineNuxtConfig({
  modules: [
    'nuxt-i18n-data'
  ],
  i18nData: {
    api: {
      url: 'https://...', /* This url will be taken for http calls. The initial GET at nuxt build and the api/i18n server handler. If google key exists this option will be ignored for GET calls. Post will still using this. */
      apiKey: 'Bearer 1234', /* If this key exists the http calls will be made with 'Authorization' header. If google key exists this option will be ignored */
      headers: { header1: 'test', header2: 'test1' }, /* If this header exists this header wil be sent to http endpoints. If google key exists this option will be ignored */
      google: { /* This key contains Google sheet credentials and will be used for http calls. If this key exists the api.url will be ignored. See #Google sheet config for more */
        providerKey: process.env.I18N_DATA_GOOGLE_SHEET_PROVIDER_KEY,
        spreadsheetId: process.env.I18N_DATA_GOOGLE_SHEET_SPREADSHEET_ID,
        credentials: { // You can use this to authentificate with oauth service account
          email: process.env.I18N_DATA_GOOGLE_CLIENT_EMAIL,
          privateKey: process.env.I18N_DATA_GOOGLE_CLIENT_PRIVATE_KEY_BASE_64 // Or directly use a private key value instead of Buffer
            ? Buffer.from(
              process.env.I18N_DATA_GOOGLE_CLIENT_PRIVATE_KEY_BASE_64,
              'base64',
            ).toString('ascii')
            : undefined,
        },
      }
    }
  }
})

That's it! You can now use Nuxt i18n data module in your Nuxt app ✨

Plugin

This module add a nuxt plugin and can be accessed via $i18nData within nuxt context

Methods

Refresh all messages. See /playground for example

$i18nData.refreshAllMessages()

Merge one message to vue-i18n instance. See src/runtime/components/I18nItem.vue for example

$i18nData.addMessage(localeCode, key, value)

Components

This module provides simple Vue commponents to GET all loaded messages, POST them and DELETE. See /playground for more

Server routes

You have to set runtime config (same format as module config) to use this

GET - /api/i18n/

Google Spreadsheet API

To get messages from a google spreadsheet you have to set the runtime config i18nData.google. See src/runtime/types.ts I18nDataGoogleConfig for all attributes Example spreadsheet https://docs.google.com/spreadsheets/d/1Th8vT5gAVqmkXyoGtxOhgtPYL-6QwDfH8viZyuKphwI/edit#gid=0

Custom API

To get messages from a custom api you have to set the runtime config i18nData.api.url. Additional you can set header via runtime config i18nData.api.apiKey and/or i18nData.api.headers. See src/runtime/types.ts I18nDataApiConfig for all attributes Return from custom api must be

[
  {
    "key": "layout.menuSecondary.test1",
    "value": "testChild",
    "localeCode": "de"
  }
]

POST - /api/i18n/

Google Spreadsheet API

Not implemented

Custom API

To post a single message to a custom api you have to set the runtime config i18nData.api.url. Additional you can set header via runtime config i18nData.api.apiKey and/or i18nData.api.headers. See src/runtime/types.ts I18nDataApiConfig for all attributes

The DTO post from client have to be

[
  {
    "key": "layout.menuSecondary.test1",
    "value": "testChildUpdate",
    "localeCode": "de"
  }
]

DELETE - /api/i18n/delete

Google Spreadsheet API

Not implemented

Custom API

To delete a single message from a custom api you have to set the runtime config i18nData.api.url. Additional you can set header via runtime config i18nData

The DTO post from client have to be empty or

[
  {
    "key": "layout.menuSecondary.test1",
    "value": "testChildUpdate",
    "localeCode": "de"
  }
]

if empty it's like delete all messages

Google sheet config

You can either using a self managed api with get endpoint to get all local messages or you can use google sheet to easily manage locale message and get this messages as json via Google Sheet API

When you want to use the get from google sheet api you have to take some actions to enable this

1. Create a google cloud project (if not already exists)
2. Enable google sheet api

• Select your project -> APIs & Services -> Library -> Search for "Google Sheet API" -> Enable

3. Create api key

• Select your project -> APIs & Services -> Credentials -> Create credentials -> API key

4. Add module config

• Add the google config in your nuxt.config. I recommend to save this sensitive data in the local .env file

export default defineNuxtConfig({
  modules: [
    'nuxt-i18n-data'
  ],
  i18nData: {
    api: {
      url: 'https://...', /* This url will be taken for http calls. The initial GET at nuxt build and the api/i18n server handler. If google key exists this option will be ignored for GET calls. Post will still using this. */
      google: {
        // This api key you created in #Google sheet config 3.
        apiKey: process.env.I18N_DATA_GOOGLE_SHEET_API_KEY,
        // This id you can grab out oft the google spreadsheet url https://docs.google.com/spreadsheets/d/...COPY THE ID FROM HERE.../
        spreadsheetId: process.env.I18N_DATA_GOOGLE_SHEET_SPREADSHEET_ID
      }
    }
  }
})

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release