docs: Mention translation component in migration (#19)

We do have a new <i18next>, so we need to describe the migration. part of #19
i18next · Oct 20, 2023 · 93f830e · 93f830e
1 parent b05d47c
commit 93f830e
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 5 deletions.
diff --git a/docs/guide/component-interpolation.md b/docs/guide/component-interpolation.md
@@ -2,20 +2,20 @@
 
 Instead of interpolating values with <code v-pre>{{ someValue }}</code> in the translations you can also interpolate markup (including Vue components) by using the `<i18next>` component and [named slots](https://v2.vuejs.org/v2/guide/components-slots.html#Named-Slots). These can be refrenced as `{ someSlot }` in the translations (mind the single curly braces).
 
-This way you can move blocks of markup around freely in the tranlations.
+This way you can move blocks of markup around freely in the translations.
 
 ## Simple example
 
 ```javascript
 const locales = {
   en: {
-    tos: "Term of Service",
     term: "I accept {termsOfUseLink}. {strongPromise}.",
+    tos: "Term of Service",
     promise: "I promise"
   },
   de: {
-    tos: "Nutzungsbedingungen",
     term: "{strongPromise}! Ich stimme den {termsOfUseLink} zu.",
+    tos: "Nutzungsbedingungen",
     promise: "Ich versprech's"
   },
 };

diff --git a/docs/migration.md b/docs/migration.md
@@ -2,8 +2,7 @@
 This package has some breaking changes compared to the @panter version.
 
 ## Features no longer supported
-- The `<i18next>` component has been removed in version 1.x of this plugin, but will be re-introduced in 2.x (for Vue 3). Please use `$t` for 1.x instead.
-- The `v-t` directive has been removed. Please use `$t`  instead.
+- The `v-t` directive has been removed. Please use `$t` instead.
 - The `v-waitForT` directive has been removed. Use `v-if="$i18next.isInitialized"` or hold off mounting Vue until i18next has been initialized:
 ```js
 const i18nInitialized = i18next.init({ ... });
@@ -38,6 +37,51 @@ new Vue({
 - Plugin options 
   - `loadComponentNamespace` has been removed without replacement.
   - `bindI18n` and `bindStore` have been replaced by [the `rerenderOn` option](./guide/started.md#plugin-options)
+- The [`<i18next>` component](guide/component-interpolation.md) now uses named slots and the `:translation` prop. The slot contents can be used as `{nameOfSlot}` in the translated message. See the example below how to replace the `tag`, `path` and `place` props. These are no longer supported.
+```vue
+// old @panter/vue-i18next
+<template>
+<!-- ...some other template code... -->
+    <i18next tag="p" class="value" path="license.goToTermsOfUse">
+        <router-link :to="{ name: 'LICENSE' }"
+                     class="link"
+                     place="termsOfUse">
+            {{ $t('license.termsOfUse') }}
+        </router-link>
+    </i18next>
+</template>
+```
+to
+
+```vue
+// vi18next-vue
+<template>
+<!-- ...some other template code... -->
+<p class="value"><!-- for a wrapper tag just use normal template syntax -->
+    <i18next :translation="$t('license.goToTermsOfUse')"> <!-- translation in the parent -->
+        <template #termsOfUseLink> <!-- will be referenced via {termsOfUseLink} in the localized message -->
+            <router-link :to="{ name: 'LICENSE' }"
+                         class="link">
+                {{ $t("license.termsOfUse") }}
+            </router-link>
+        </template>
+    </i18next>
+</p>
+</template>
+```
+
+With translations looking like this:
+```js
+        en: {
+            translation: {
+                license: {
+                    goToTermsOfUse: "Read our {termsOfUseLink}",
+                    termsOfUse: 'Terms of Use'
+                }
+            }
+       }
+```
+
 
 ## Other changes
 The minimum tested i18next version is now 19.