Unified のツールを Nuxt 2 で利用する方法

Nuxt Content は、特に markdown ファイルを、 Unified (also known for: remark, rehype) でパースし、 lokiDB につっこみ、 $content から検索し、それを NuxtDocument で表示する、といった処理をその動作の基本としている。

なので、 markdown のパース結果に対して、木構造的な操作を行いたくなった場合、それは純粋に javascript の範囲で愚直に実装するよりも、 Unified が提供する諸々の AST 操作関数たちを利用することで、これを効率良く行うことができる。

問題

Unified の配布ファイルは、その拡張子は .js でありながらも、 ES Module 形式で記述されている様子で、 これをそのまま import しようとしても、 (webpack の結果) CommonJS 形式を想定する Nuxt 2 では、ちゃんと動いてくれない。

対処方法

build.transpile に、 unified のパッケージを指定することで、これが利用可能になる。

// nuxt.config.ts

const plugin = {
  // ...
  build: {
    transpile: ['unist-util-visit']
  }
}

// SomeComponent.vue

import { visit } from 'unist-util-visit';

// ...