README
Shopify Theme Lab I18n
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>