

nuxt3のプロジェクトでstorybookを使用してコンポーネント開発を進めたいのですが、`./plugins/`以下に作成した下記に記載のプラグイン関数(`$getLang()`)を使用しているストーリーをレンダリングする際に`TypeError:
_ctx.$getLang is not a
function.`とエラーが出ます。どのように`.storybook/preview.ts`に関数を設定すれば良いのでしょうか。

  * plugins/i18n.ts

[code]

    import { createI18n } from 'vue3-i18n'
    import en from '@/locales/en.json'
    import ja from '@/locales/ja.json'
    import zh_TW from '@/locales/zh_TW.json'
    import zh_CN from '@/locales/zh_CN.json'
    
    interface I18nOptions {
      locale: string
      messages: Record<string, object>
    }
    
    const getBrowserLanguage = (): string => {
      if (process.client) {
        return window.navigator.language
      }
      return 'en'
    }
    
    const getLocaleFromCookie = (): string | null => {
      // Read from cookie
      const cookie = useCookie<string>('locale')
      if (cookie.value) {
        return cookie.value
      }
      return null
    }
    
    const LANGS = {
      EN: 'en',
      JP: 'ja',
      TW: 'zh-TW',
      CN: 'zh-CN',
    }
    
    const getLocale = (): string => {
      const browserLanguage = getBrowserLanguage()
      if (Object.values(LANGS).includes(browserLanguage)) {
        return browserLanguage
      }
      const cookieLocale = getLocaleFromCookie()
      if (cookieLocale && Object.values(LANGS).includes(cookieLocale)) {
        return cookieLocale
      }
      return 'en'
    }
    
    const messages: Record<string, object> = { en, ja, 'zh-tw': zh_TW, 'zh-cn': zh_CN }
    
    const i18nOptions: I18nOptions = {
      locale: getLocale().toLowerCase(),
      messages,
    }
    
    const i18n = createI18n(i18nOptions)
    
    export default defineNuxtPlugin((nuxt) => {
      nuxt.vueApp.use(i18n)
    
      return {
        provide: {
          t: () => null,
          getLang: (key: string, params?: Array<string>) => {
            if (!key) return ''
            return i18n.t(key, params)
          },
          setLocale: (value: string) => {
            i18n.setLocale(value)
          },
          getLocale: () => i18n.getLocale(),
        },
      }
    })
    
[/code]

  * package.json(一部抜粋)

[code]

    "devDependencies": {
        "@nuxtjs/tailwindcss": "^6.8.0",
        "@storybook/addon-essentials": "^7.0.27",
        "@storybook/addon-interactions": "^7.0.27",
        "@storybook/addon-links": "^7.0.27",
        "@storybook/blocks": "^7.0.27",
        "@storybook/testing-library": "^0.0.14-next.2",
        "@storybook/vue3": "^7.0.27",
        "@storybook/vue3-vite": "^7.0.27",
        "eslint": "^8.44.0",
        "eslint-plugin-storybook": "^0.6.12",
        "nuxt": "^3.5.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "storybook": "^7.0.27",
        "storybook-addon-nuxt": "^1.3.3",
        "typescript": "^5.1.6",
        "vue3-i18n": "^1.1.5"
      },
    
[/code]

  * .storybook/main.ts

[code]

    import type { StorybookConfig } from '@storybook/vue3-vite'
    
    export const config: StorybookConfig = {
      stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
      addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
      framework: {
        name: '@storybook/vue3-vite',
        options: {},
      },
      docs: {
        autodocs: 'tag',
      },
    }
    
[/code]

  * .storybook/preview.ts

[code]

    import type { Preview } from '@storybook/vue3'
    
    export const preview: Preview = {
      parameters: {
        actions: { argTypesRegex: '^on[A-Z].*' },
        controls: {
          matchers: {
            color: /(background|color)$/i,
            date: /Date$/,
          },
        },
      },
    }
    
[/code]


CC BY-SA 4.0
2023-07-17T00:13:25.630
95654
2023-07-17T00:13:25.630
59124
question
typescript vue.js
nuxt3のプラグイン関数をstorybookで使えるように設定する方法を知りたい。