Internationalization

The Shopify Vue App template comes with built-in internationalization support, making it easy to create apps for merchants worldwide.

How It Works

• Uses Vue i18n for efficient localization
• Automatically detects Shopify's locale parameter
• Falls back to English if no locale is specified
• Embeds language in URL paths (/en/products, /fr/settings)

Adding New Languages

1. Create a JSON file in src/locales/ (e.g., de.json for German)
2. Include translation keys for your app's text

Example format:

{
  "app": {
    "title": "Meine Shopify-App",
    "welcome": "Willkommen bei Ihrer neuen App!"
  },
  "nav": {
    "home": "Startseite",
    "products": "Produkte"
  }
}

Using In Components

<template>
  <h1>{{ $t('app.title') }}</h1>
  <p>{{ $t('app.welcome') }}</p>
</template>

Language Detection

The app automatically:

• Reads the locale from Shopify
• Redirects to the appropriate language path
• Falls back to English if needed

Server-Side Support

• useAuthenticatedFetch includes locale in headers
• Server can read preferences with getLocalePreferencesFromRequest

Available Languages

The template includes basic translations for:

• English (en)
• French (fr)
• German (de)
• Spanish (es)

Contributions to improve translations are always welcome!