プログラマティックな利用方法

$content@nuxt/contentからアクセスできます

モジュールがNuxtによってロードされた後でなければアクセスできないことに注意してください。require('@nuxt/content') は、フックや内部のNuxtメソッドで発生するはずです。
export default {  modules: [    '@nuxt/content'  ],  generate: {    async ready () {      const { $content } = require('@nuxt/content')      const files = await $content().only(['slug']).fetch()      console.log(files)    }  }}

静的サイト生成

Nuxt 2.13+ 以降、nuxt export にはクローラー機能が統合されており、すべてのリンクをクロールし、それらのリンクに基づいてルートを生成します。したがって、動的なルートをクロールさせるためには何もする必要はありません。

nuxt generate を利用する場合は、generate.routes で動的ルートを指定する必要があります。 なぜなら、Nuxtはこれらのルートが何になるかわからないので、ルートを生成できないからです。

export default {  modules: [,    '@nuxt/content'  ],  generate: {    async routes () {      const { $content } = require('@nuxt/content')      const files = await $content().only(['path']).fetch()      return files.map(file => file.path === '/index' ? '/' : file.path)    }  }}

フック

いくつかのフックを提供します。

content:file:beforeInsert

保存する前にドキュメントへデータを追加できます。

Arguments:

ブログのスターターを例にとると、reading-Timeを利用したreadingTime をドキュメントへ追加するために、file:beforeInsertを使うことができます。

textは、JSON ASTに変換される前のMarkdownファイルのbodyの内容で、この時点では使用できますが、APIからは返されません。

export default {  modules: [,    '@nuxt/content'  ],  hooks: {    'content:file:beforeInsert': (document) => {      if (document.extension === '.md') {        const { time } = require('reading-time')(document.text)        document.readingTime = time      }    }  }}

ホットリロードの取り扱い

開発モードの場合、モジュールは自動的に nuxtServerInitストアアクション(定義されている場合)と $nuxt.refresh() を呼び出して現在のページを更新します。

イベントを待ち受けてさらに何かをしたい場合は、$nuxt.$on('content:update')を使ってクライアント側で content:update イベントを待ち受けることができます。

export default function ({ store }) {  // 開発時のみ  if (process.dev) {    window.onNuxtReady(($nuxt) => {      $nuxt.$on('content:update', ({ event, path }) => {        // storeのカテゴリを更新        store.dispatch('fetchCategories')      })    })  }}

nuxt.config.jsにプラグインを追加します。

nuxt.config.js
export default {  plugins: [    '@/plugins/update.client.js'  ]}

これで、content/ディレクトリ内のファイルを更新するたびに、fetchCategoriesメソッドもディスパッチされます。 このドキュメントサイトでは実際にそれを使用しています。plugins/init.jsを見れば、より多くのことを学ぶことができます。

APIエンドポイント

このモジュールは開発中のAPIエンドポイントを公開し、各ディレクトリやファイルのJSONを簡単に見ることができるようにします。http://localhost:3000/_content/で利用可能です。プレフィックスはデフォルトでは _contentで、apiPrefixプロパティで設定できます。

例:

-| content/---| articles/------| hello-world.md---| index.md---| settings.json

localhost:3000で公開されます:

  • /_content/articles: content/articles/のファイルのリスト
  • /_content/articles/hello-world: hello-world.md をJSONで取得
  • /_content/index: index.md をJSONで取得
  • /_content/settings:settings.json をJSONで取得
  • /_content: indexsettingsのリスト

エンドポイントは GETPOST リクエストでアクセスできるので、クエリのパラメーターを利用できます。: http://localhost:3000/_content/articles?only=title&only=description&limit=10.

v1.4.0以降、このエンドポイントはクエリパラメーターの whereもサポートしています。

  • デフォルトのキーに属さないすべてのキーが whereに適用されます。

http://localhost:3000/_content/articles?author=...

  • $operators_と一緒に使うことができます。

http://localhost:3000/_content/articles?author_regex=...

このモジュールは 、内部的にLokiJSを使用しています。、あなたはクエリの例https://github.com/techfort/LokiJS/wiki/Query-Examples#find-queries)をチェックすることができます。

http://localhost:3000/_content/products?categories.slug_contains=top

このエンドポイントについての詳細は lib/middleware.jsを参照してください。