vue-i18n + storybook - Why are my translations not working?

user_12169081 0
Viewed 1908

i'm using vue, vuei18n and storybook but i'm having problems with translations showing.

storybook loads up fine with my custom webpack config. translations are stored in each component's i18n tags via a .json file.

i'm using the following webpack config rules:

        test: /\.scss$/,
        loaders: ["style-loader", "css-loader", "sass-loader"],
        include: path.resolve(__dirname, "../"),
    }, {
        test: /\.html$/,
        loaders: ["html-loader"],
        include: path.resolve(__dirname, "../"),
    }, {
        resourceQuery: /blockType=i18n/,
        type: "javascript/auto",
        loader: "@kazupon/vue-i18n-loader",
    });

stories are typically loaded like so: 

storiesOf("MyComponent", module)
    .add("MyComponent opened", () => ({
        components: { MyComponent },
        template: '<v-app><my-component></my-component></v-app>',
        i18n,
        store,
        created() {
            store.dispatch("myComponent/openWith", null);
        },
    }))

i'm also using vue-loader 15.7.1, storybook 5.2.1.

When components load I get the following warning on browser console:

[vue-i18n] Cannot translate the value of keypath 'translation.value'. Use the value of keypath as default

This is because the $i18n.locale is set to "en-US", even though I've defined it in the story as it loads. If I insert a created() method which sets locale to "en" the translations work fine. Why is this happening?

vue-i18n storybook vue.js webpack
1 Answers

The error msg is "Cannot translate the value of keypath translation.value".So maybe you need to declare translation.value in your i18n instance. like: 

i18n: new VueI18n({
  locale: 'en',
  messages: {
    en: {
      transition: {
        value: 'value'
      }
  }
}
user_114580500
Related