Storybook: use storybook with vue and vue-i18n

[sky790312]

my component combines with vue-i18n. I try to add like this:

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

but it still can't work in storybook. How to use it ?

[ndelangen]

Move the code into the config.js:

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

See the veux example here:
https://github.com/storybooks/storybook/blob/master/examples/vue-kitchen-sink/.storybook/config.js#L9

[sky790312]

I use it in config.js. But it doesn't work.
In vue, the completed usage is like:

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import locales from '../src/locales'

Vue.use(VueI18n)
const i18n = new VueI18n({
   locale: 'zh-tw',
   messages: locales,
   silentTranslationWarn: true
})

const app = new Vue({
   el: '#app',
   i18n,
   render: h => h(App)
})

But I don't know how to setting this in storybook

[kazupon]

In the same way as vuex, You need to use the VueI18n instance in the story

See the vuex story example here:
https://github.com/storybooks/storybook/blob/master/examples/vue-kitchen-sink/src/stories/index.js

[alexcheninfo]

@kazupon Could you please provide a short example? store: new Vuex.Store uses new. So it's a bit confusing how to use the VueI18n instance in the story.

[kazupon]

I tried it at storybook.
it does not work.
Hmm 🤔 I'll try to support due to work at storybook.

[kazupon]

fixed, and I provided the storybook example.
please check vue-i18n v7.1.1

https://github.com/kazupon/vue-i18n/tree/dev/examples/storybook

[sky790312]

awosome! Thanks.

[maeh2k]

Hi @kazupon,
I have an issue with vue-i18n in storybook even though I followed the example https://github.com/kazupon/vue-i18n/tree/dev/examples/storybook
I changed the .config and added the i18n in the story itself.

However, the i18n from the story is not passed into the component.
Instead the component appears to create a default i18n with locale en-US and no root i18n.

It appears that the i18n breaks during the merge.
When I remove the tag from the SFC, it will show global messages of the right locale.
When I keep the tag and add messages in en-US, they work, too.

I have tried various ways to configure the vue-i18n-loader, but I never managed to get both the tags and the passed in i18n to work in SFCs...

[alexander-elgin]

If you use Vue CLI plugin for storybook you can modify the config/storybook/config.js as follows

import { addDecorator } from '@storybook/vue';
import i18n from '@/plugins/i18n';

addDecorator(() => ({
  template: '<story/>',
  i18n,
}));

[NefixEstrada]

Thank you, @alexander-elgin !!

I've been searching a solution for this plugin but was unable to make it work. It would be really nice to add this to the Vue documentation with a small example, since I'm sure there are lots of packages that need to be used like this.

[graup]

This still doesn't work with Single File Components that rely on the root fallback: https://github.com/dlucian/vuejs-storybook-i18n/issues/1