feat(interpolation): i18next component supports options params

Author: claudiocro

README.md

@@ -158,8 +158,64 @@ Vue.component("app", {
       </i18next>
     </div>`
 });
+
+Vue.component("app", {
+  template: `
+    <div>
+      <i18next path="term" tag="label">
+        <a href="#" target="_blank">{{ $t("tos") }}</a>
+        <strong>{{ $t("promise") }}</strong>
+      </i18next>
+    </div>`
+});
+```
+
+```javascript
+// i18next component support to specify the place
+
+const locales = {
+  en: {
+    tos: "Term of Service",
+    term: "I accept {{tos}}. {{promise}}.",
+    promise: "I promise"
+  }
+};
+
+...
+
+Vue.component("app", {
+  template: `
+     <div>
+      <i18next path="term" tag="label">
+        <a href="#" target="_blank" place="tos">{{ $t("tos") }}</a>
+        <strong place="promise">{{ $t("promise") }}</strong>
+      </i18next>
+    </div>`
+});
 ```
 
+
+```javascript
+// i18next component support the ($t)[https://www.i18next.com/overview/api#t] options param
+
+const locales = {
+  en: {
+    counter: "{{0}} dude",
+    counter_plural: "{{0}} dudes"
+  }
+};
+
+...
+
+Vue.component("app", {
+  template: `
+    <div>
+      <i18next path="term" tag="label" options="{ count: 2 }">
+        <strong>Hello</strong>
+      </i18next>
+    </div>`
+});
+
 ### Directive
 
 Full Featured properties:

src/component.js

@@ -10,6 +10,9 @@ export default {
       type: String,
       required: true,
     },
+    options: {
+      type: Object,
+    },
   },
   render(h, { props, data, children, parent }) {
     const i18next = parent.$i18n;
@@ -18,9 +21,10 @@ export default {
     }
 
     const path = props.path;
+    const options = props.options || {};
 
     const REGEXP = i18next.i18next.services.interpolator.regexp;
-    const format = i18next.t(path, { interpolation: { prefix: '#$?', suffix: '?$#' } });
+    const format = i18next.t(path, { ...options, interpolation: { prefix: '#$?', suffix: '?$#' } });
     const tchildren = [];
 
     format.split(REGEXP).reduce((memo, match, index) => {

test/unit/interpolation.test.js

@@ -16,6 +16,8 @@ describe('interpolation', () => {
               hello1: 'Hello {{0}} {{1}}',
               hello2: 'Hello {{1}} {{0}}.',
               hello3: 'Hello {{first}} {{second}}.',
+              counter: '{{0}} singular',
+              counter_plural: '{{0}} plural',
             },
           },
         },
@@ -68,6 +70,21 @@ describe('interpolation', () => {
     });
 
     it('should interpolate components by place', async () => {
+      const el = document.createElement('div');
+      const vm = new Vue({
+        i18n: vueI18Next,
+        render(h) {
+          return h('i18next', { ref: 'text', props: { tag: 'div', path: 'counter', options: { count: 2 } } }, [
+            h('p', { domProps: { textContent: 'Counter' } }),
+          ]);
+        },
+      }).$mount(el);
+
+      await nextTick();
+      expect(vm.$el.outerHTML).to.equal('<div><p>Counter</p> plural</div>');
+    });
+
+    it('should interpolate components supporting plurals', async () => {
       const el = document.createElement('div');
       const vm = new Vue({
         i18n: vueI18Next,