Storybook + Vuejs + vue-18n : translate strings from sfc i18n section but not root messages

[erikrenaud]

I initialize storybook (vuejs) like the following and can confirm that at the story level, this.$i18n is correctly initialized and contains the messages in my ./src/locales/*.json files.

in config.js // Ensures every story is wrapped in a v-app tag addDecorator(() => ({ template: "<v-app :style='{background: $vuetify.theme.themes.light.background}'><story/></v-app>", vuetify: vuetifyConfig, i18n, }));

In my story, storiesOf('Components/THeader', module) .addDecorator(StoryRouter()) .add('Signed Out visiting Support & Feedback page', () => ({ components: { THeader }, template: <t-header route="support-feedback" @sign-in="onSignIn" @goto-route="onGotoRoute" @sign-out="onSignOut" @sync="onSync"/> should appear after toolbar , methods: { onSignIn: function() { console.log('test1', this.$t('appName')); console.log('test2', this); },

When storybook runs this story, items get translated for every resource that is contained in the sfc's section, but doesn't fallback to the what at the global scope automatically (loaded from ./src/locales/*.json) as it does when the app runs outside of Storybook.

Errors in the console include :

[vue-i18n] Value of key 'appName' is not a string or function ! vue-i18n.esm.js:38 [vue-i18n] Cannot translate the value of keypath 'appName'. Use the value of keypath as default.

It's like the child i18n doesn't fallback to include messages from the global scope...

Any idea how to fix this?