Combining Single File Component syntax with root messages

[ccamarat]

I was kicking the tires a bit and ran into an unexpected problem. It appears one cannot reference the root translation node from within an <i18n> block inside an SFC.

main.js

import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
const i18n = new VueI18n({
  locale: 'en',
  messages: {
    'company-name': 'billy-bob\'s fine steaks.'
  }
});

Sample.vue

<i18n>
  {
    "en": {
      "title": "@:company-name - yeee hawwww!!!"
    }
  }
</i18n>

<template>
  <div id="app" class="container">
    <site-header :title="$t('title')"></site-header>
  </div>
</template>

Without the <i18n> block, company-name can be bound to :title. Interestingly, both properties can be accessed from within a computed property as suggested in this helpful SO answer.

[kazupon]

You need to define the locale (e.g. en).
Please see the Locale messages syntax section.
https://kazupon.github.io/vue-i18n/en/messages.html

[ccamarat]

The sample code above was pasted incorrectly; it should have been:

/static/i18n/en.json

{
    "company-name": "billy-bob\'s fine steaks."
}

main.js

import VueI18n from 'vue-i18n';
import langEn from '/static/i18n/en.json';
Vue.use(VueI18n);
const i18n = new VueI18n({
  locale: 'en',
  messages: {
    en: langEn
  }
});

As mentioned in the original, without the <i18n> block, company-name can be bound to :title and work properly. The problem only occurs if the root node is referenced from within the <i18n> block.

I apologize for the red herring in the original post; I'd thought I double-checked it.

[kazupon]

Could you provide the minimum reproduction repo please?

[ccamarat]

Should just be this:

/static/i18n/en.json

{
    "company-name": "billy-bob's fine steaks."
}

main.js

import VueI18n from 'vue-i18n';
import langEn from '../static/i18n/en.json';
Vue.use(VueI18n);
const i18n = new VueI18n({
  locale: 'en',
  messages: {
    en: langEn
  }
});

Sample.vue

<i18n>
  {
    "en": {
      "title": "@:company-name - yeee hawwww!!!"
    }
  }
</i18n>

<template>
  <div id="app" class="container">
    <site-header :title="$t('title')"></site-header>
  </div>
</template>

In case there's something I missed I created a demo project using the Vue CLI, which you can see running here.