japhy-i18n v1.0.28

i18n

Fetch your Prismic translations per page and retrieve them easily.

Installation

First install the package

yarn add japhy-i18n

Use it in a vue plugin

import Vue from 'vue'
import i18n from 'japhy-i18n'
import { router } from '@/core/router'

Vue.use(i18n, {
  clientUrl: 'https://japhy.cdn.prismic.io/api/v2',
  router,
})

Declare you translated pages in your routes

const routes = [{
  path: '/',
  name: 'homepage',
  i18nPages: [
    'my_page', // my prismic document
    'my_second_page'
  ],
}]

Usage

With vue2 this.$i18n method will be available in context and will automatically retrieve the provided key from the i18n page.

With vue3 you can also use a hook e.g

<template>
  <div>{{ i18n('my_translation_key') }}</div>
</template>

<script>
import { useTranslation } from 'japhy-i18n'

export default {
  setup() {
    const i18n = useTranslation()

    return { i18n }
  }
}
</script>

This method uses icu to format the translations. Here is the api

Variables

// my_key_from_prismic = 'My name is {name}'

this.$i18n('my_key_from_prismic', { name: 'Eric' }) // -> My name is Eric

Plural

// my_key_from_prismic = 'You have {numPhotos, plural,
//   =0 {no photos.}
//   =1 {one photo.}
//   other {# photos.}
// }'

this.$i18n('my_key_from_prismic', { numPhotos: 1000 }) // -> You have 1,000 photos.

Chunks

<script>/* my_key_from_prismic = "My name is <name>jack l'ancien</name> who's <age>8</age> years old only" */</script>

<template>
  <RichTranslation translation="key"> 
    <template #name="name">
      <h1>{{ name }}</h1>
    </template>
    <template #age="age">
      <i>{{ age }}</i>
    </template>
  </RichTranslation>
</template>

<script>/* -> My name is <h1>jack l'ancien</h1> who's <i>8</i> years old only */</script>

Chunks from different translations

<script>
// my_key_from_prismic = "My name is <name></name> who's <age></age> years old only"
// my_second_key_from_prismic = "jack le gars grave sur"
</script>

<template>
  <RichTranslation translation="key">
    <template #name>
      <h1>{{ $i18n('my_second_key_from_prismic') }}</h1>
    </template>
    <template #age="age">
      <i>{{ age }}</i>
    </template>
  </RichTranslation>
</template>

<script>/* -> My name is <h1>jack le gars grave sur</h1> who's <i>8</i> years old only */</script>

Price

// my_key_from_prismic = "The price is: {price, number, ::currency/EUR}"

this.$i18n('my_key_from_prismic', { price: 100 }) // -> The price is: 100 €

Date

// my_key_from_prismic = "Today is: {now, date, ::yyyyMMdd}'"

this.$i18n('my_key_from_prismic', { now: new Date() }) // ->Today is: 16/06/2021

ProTip : You can use tampermonkey to get color syntax highlight in prismic (with icu language) with this script https://gist.github.com/blaadje/d5c054b85033a7c96ec80dfc7c0d47a1

With error parser