Vite とプラグインの設定

環境: node

このセットアップ関数は、Node.js 環境でのみ実行されます。Node.js の API にアクセスできます。

Slidev は、内部で Vite を使用しています。これは Vite の優れたプラグインシステムを活用して、スライドをさらにカスタマイズできることを意味しています。

vite.config.ts がある場合、Slidev、テーマ、アドオンが提供する Vite 設定とマージされます。

内部プラグインの設定

Slidev は Vite に以下のプラグインを内部的に追加します:

上記の組み込みプラグインを設定するには、以下の内容で vite.config.ts を作成します。Slidev にはこれらのプラグイン用のデフォルト設定があることに注意してください。この使用法はそれらの一部をオーバーライドし、アプリを破壊する可能性があります。高度な機能として扱い、設定する前に何をしているのかを確認してください。

vite.config.ts

import { defineConfig
 } from 'vite'

export default defineConfig
({
  slidev
: {
    vue
: {
      /* vue options */
    },
    markdown
: {
      /* markdown-it options */
      markdownItSetup
(md
) {
        /* custom markdown-it plugins */
        md
.use
(MyPlugin
)
      },
    },
    /* options for other plugins */
  },
})

型宣言でさらに多くのオプションを参照してください。

WARNING

Slidev によって内部的に使用されたプラグインを再度追加することは許可されていません。例えば、以下のような形は避けてください

import Vue
 from '@vitejs/plugin-vue'
import { defineConfig
 } from 'vite'

export default defineConfig
({
  plugins
: [
    Vue
({
      /* vue options */
    })
  ],
})

この代わりに、Vue オプションを slidev.vue フィールドに渡してください

スライドデータに基づいてカスタムプラグインを追加する

通常、vite.config.ts に Vite プラグインを追加できます (上記を参照)。ただし、スライドデータに基づいてプラグインを追加する場合は、以下の内容で ./setup/vite-plugins.ts を追加する必要があります:

import { defineVitePluginsSetup
 } from '@slidev/types'

export default defineVitePluginsSetup
((options
) => {
  return [
    // Your plugins here
    // Slide data is available as options.data.slides
  ]
})

Vite とプラグインの設定 ​

内部プラグインの設定 ​

スライドデータに基づいてカスタムプラグインを追加する ​

Vite とプラグインの設定

内部プラグインの設定

スライドデータに基づいてカスタムプラグインを追加する