Storybook 擴充功能，Vue 對 MDX 的支援

在 MDX 檔案內使用 Vue 元件，就像使用 React 元件一樣。

限制

此擴充功能尚處於早期階段，有以下限制

• 僅適用於 Vue 3 和 Storybook 8（對於 Storybook 7，請使用 v0.1.5）
• 元件必須在 MDX 檔案中本地導入
• Provide/Inject 尚未測試，但應該可以使用
• 自訂 API 未來可能會變更

在本地執行 Storybook 時，還有一個已知的錯誤。有時，第一次載入含有 Vue 元件的 MDX 頁面時可能會崩潰，因為 Storybook 沒有正確執行在 beforeVueAppMount 中定義的程式碼。這可能是由於 Storybook 解析和執行預覽檔案的方式所致，但此錯誤完全不會發生在正式版建置中。您可以透過重新整理瀏覽器分頁來解決此錯誤，它會在第二次載入時成功執行。

安裝

yarn add -D storybook-addon-vue-mdx

在您的 .storybook/main.js 檔案中，新增以下內容

export default {
  addons: ['storybook-addon-vue-mdx'],
}

用法

在 Sample.mdx 檔案中，導入您需要的元件，並使用 Vue JSX 語法來使用它

import MyComponent from 'path-to-components/MyComponent.vue'

<MyComponent>bla bla</MyComponent>

Vue JSX 語法已由 Vue 文件記載。請特別注意傳遞插槽的語法。

自訂 Vue 應用程式上下文

此擴充功能使用 veaury 在 React JSX 上下文中渲染 Vue 元件。特別是，擴充功能會呼叫 applyPureVueInReact。您可以透過在 .storybook/preview.js 檔案中定義 globals 將選項傳遞給此函數，如下所示

const globals = {
  vueMdx: {
    beforeVueAppMount(app) {
      app.use(myCustomPlugin)
    },
  },
}

export default {
  globals,
}

您也可以按照 Veaury 的自有文件，直接導入並使用 Veaury 的 applyVueInReact。

開發腳本

• yarn start 會在監看模式下執行 babel 並啟動 Storybook
• yarn build 會建置並封裝擴充功能程式碼
• yarn pack:local 會建立一個本機 tarball，以便在其他地方用作 NPM 依賴項

錯誤報告

在報告錯誤之前，請仔細檢查 Veaury 的文件和問題清單，看看是否有符合的問題。

若要報告錯誤，請在此儲存庫上使用 GitHub 問題，並務必包含一個可運作的最小範例。例如，您可以使用 storybook.new 來引導建立一個重現環境。

遷移到較新的 Storybook 版本

如果您想要遷移擴充功能以支援最新版本的 Storybook，您可以查看 擴充功能遷移指南。