An I18n plugin for Shopify Theme Lab. Use the same locale files from Shopify for your JavaScript or Vue files.

Requirements

Shopify Theme Lab >= 3.0.0

Installation

npm

npm install shopify-theme-lab-i18n

yarn

yarn add shopify-theme-lab-i18n

Locales

Your locale files should be placed in the shopify/locales directory.

Upcoming examples assume you have the shopify/locales/en.default.json file with the following content:

{
  "action": {
    "log_in": "Log in"
  }
}

Translating JavaScript files

create src/i18n.js file with the following content:

import { I18n } from 'shopify-theme-lab-i18n'

const i18n = new I18n()
const $t = i18n.$t

export {
  i18n,
  $t
}

Import the newly created i18n instance or the $t method in the file you want to translate. Call the $t method and pass the path to the translation as a string separated by dots:

import { $t } from '@/i18n'

$t('action.log_in')

Translating Vue files

in src/main.js add the i18n Vue plugin:

import { createApp } from 'vue'
import { VuePlugin as i18n } from 'shopify-theme-lab-i18n'

const app = createApp({})
app.use(i18n)

Inside Vue components you can now call the $t method:

<template>
  <div>
    {{ $t('action.log_in') }}
  </div>
</template>

<script>
export default {
  created () {
    this.$t('action.log_in')
  }
}
</script>