Support scoped style while translating string with HTML tags.

[myst729]

This is not an actual issue, but a feature request indeed.

Sometimes when we provide a piece of information, we would like to insert hyper links as well. For example:

<p>You can <a href="http://example.com">refund the ticket</a> until 30 minutes from departure.</p>

Following code would make it i18n ready:

const locales = {
  en: {
    refundInfo: 'You can <a href="{refundLink}">refund the ticket</a> until 30 minutes from departure.'
  },
  cn: {
    refundInfo: '办理<a href="{refundLink}">退票</a>手续的截止时间为发车前 30 分钟。'
  }
}

<p v-html="$t('refundInfo', {refundLink: 'http://example.com'})"></p>

This looks good. But when we work with <style scoped> in *.vue, it won't apply the styles. Because all selectors extracted from <style scoped> are restricted with a special attribute, which equals to the component's $options._scopeId. So do all elements in the template.

To deal with it, my current approach is like this:

const locales = {
  en: {
    refundInfo: 'You can <a {_scopeId} href="{refundLink}">refund the ticket</a> until 30 minutes from departure.'
  },
  cn: {
    refundInfo: '办理<a {_scopeId} href="{refundLink}">退票</a>手续的截止时间为发车前 30 分钟。'
  }
}

<p v-html="$t('refundInfo', {refundLink: 'http://example.com', _scopeId: $options._scopeId})"></p>

Or one step further:

<p v-html="$scopedT('refundInfo', {refundLink: 'http://example.com'})"></p>

methods: {
  $scopedT (key, obj) {
    obj._scopeId = this.$options._scopeId
    return this.$t(key, obj)
  }
}

This is annoying:

• I need a wrapper for $t to inject _scopeId.
• I need to hard code a {_scopeId} field for every tag in my i18n strings, too ugly.

I'm wondering whether the scope id injection could be a built-in feature? Either with or without a switch.

[myst729]

Maybe another approach is to wrap v-html directive?

[myst729]

Looks like can be indirectly solved by this new feature? http://vue-loader.vuejs.org/en/features/css-modules.html

[yyx990803]

Even without CSS modules you can wrap the v-html content in a div with a unique class and use a separate non-scoped <style> tag to get the normal cascading behavior.

[kazupon]

Close (say the below alternative)