[Vuejs]-How can I make vue-i18n / vue2 work with Storybook mdx type story?

by

-1👍

The solution was easy, but hard to figure out or to find.

To make $t() function work in your .mdx storybook story files you need two things:

  • include vue-i18n in your .mdx file
  • add i18n section to your Template configuration (in the same file)

and it goes like this – this is the working file:

<!-- Avatar.stories.mdx -->

import { Meta, Description, Canvas, Story, ArgsTable } from '@storybook/addon-docs';

import Avatar from '../app/js/components/common/Avatar';

import VueI18n from 'vue-i18n';

<Meta
  title="Components/Common/Avatar"
  component={Avatar}
  argTypes={{
    username: {
      control: 'string',
    },
  }}
  args={{
    username: 'Tom Thomson',
  }}
/>

export const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Avatar },
  i18n: new VueI18n({
    locale: 'en',
    fallbackLocale: 'en',
    messages: {
      en: messagesEn,
      ar: messagesAr,
    },
  }),
  template: `
    <div class="wrapper">
      <Avatar v-bind="$props">
      </Avatar>
    </div>
  `,
});

# Avatar

<Description />

Basic style

<Canvas>
  <Story
    name="Basic"
    args={{
    }}>
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable of={Avatar} />

I hope that helps someone.

👤Picard

Leave a comment