4

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?

angrylobster
  • 41
  • 3

1 Answers1

0

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'
      }
  }
}
thelonglqd
  • 1,805
  • 16
  • 28
Zane
  • 1
  • 1