Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Suggesion: built-in translation component to support html interpolation using slots #145

Closed
abou7mied opened this issue Apr 17, 2017 · 3 comments

Comments

@abou7mied
Copy link

abou7mied commented Apr 17, 2017

I was having a problem with html and component interpolation. (there is a solution below 😄)

My issue was with replace translation variables with vue components or html elements

For example

en.json

{
  "message": "Hello {visitor}, Login {loginLink} or register {registerLink}"
}

using v-html was bad option because it wouldn't parse vue components and I can't use html interpolation

module.exports = {
  data(){
    return {
      visitorName: "visitor"
    };

  },
  computed: {
    message(){
      return this.$("message", {
        visitor: this.visitorName,
        loginLink: '<router-link to="/login">Login</router-link>',
        registerLink: '<router-link to="/register">Register</router-link>',
      })
    }

  }
};
div#message(v-html="message")

This would output

<div id="message">
    Hello visitor, Login <router-link to="/login">Login</router-link> or <router-link to="/register">Register</router-link>
</div>

I solved it by using slots and make custom translation component

translation.js

const regex = /{\s*\w+\s*}/g;

module.exports = {

  props: [
    "path",
    "translation"
  ],
  render: function (createElement) {
    let translation = this.path ? this.$t(this.path) : this.translation || "";
    let nodes = translation.split(regex);
    let index = -1, m;
    while ((m = regex.exec(translation)) !== null) {
      if (m.index === regex.lastIndex)
        regex.lastIndex++;
      index += 2;
      let key = m[0].replace(/[{}]/g, "").trim();
      nodes.splice(index, 0, this.$slots[key]);
    }
    return createElement("div", nodes);
  },
};

usage

test.vue

<template lang="pug">
  translation(:translation="$t('message')")
    span(slot="visitor") {{visitorName}}
    router-link(slot="loginLink", to="/login") Login
    router-link(slot="registerLink", to="/register") Register

  // or using path prob
  // translation(path="message")

</template>

<script>

  module.exports = {

    data(){
      return {
        visitorName: "Visitor"
      }
    },

  }

</script>

output

<div>
  Hello visitor, Login <a href="/login">Login</a> or <a href="/register">Register</a>>
</div>

Maybe variables extracting isn't the same as the plugin

I think it would be a good idea if it was a built-in component in the plugin.
Thanks!

@abou7mied
Copy link
Author

#144 #120 #37 #58 #75

@abou7mied abou7mied changed the title [FEATURE REQUEST] translation component to support html translations Suggesion: built-in translation component to support html interpolation Apr 17, 2017
@abou7mied abou7mied changed the title Suggesion: built-in translation component to support html interpolation Suggesion: built-in translation component to support html interpolation using slots Apr 17, 2017
@kazupon kazupon closed this as completed in 23f7d34 May 2, 2017
@ironicnet
Copy link

@kazupon is there an example or a doc about how to use the interpolation?

@kazupon
Copy link
Owner

kazupon commented May 9, 2017

See (WIP):
https://github.com/kazupon/vue-i18n/blob/dev/gitbook/en/interpolation.md

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants