nuxt.config.jsのcontentプロパティで@nuxt/contentの設定ができます。

nuxt.config.js
export default {  content: {    // カスタム設定  }}

個々の設定項目を学ぶ前に、デフォルトの設定を確認してください。

デフォルト値とのマージ

すべての設定のプロパティを関数または静的な値 (プリミティブ、オブジェクト、配列、...) として定義できます。 関数で定義する場合、デフォルト値が第一引数として提供されます。

もしプロパティを定義するのに関数を使わない場合、設定されていない値はデフォルト値とマージします。 デフォルト値は非常に賢明なので、これはmarkdown.remarkPlugins、markdown.rehypePluginsなどに便利です。 デフォルト値とのマージを回避したい場合、関数でのプロパティ定義を利用してください。

プロパティ一覧

apiPrefix

  • Type: String
  • Default: '/_content'

クライアントサイドのAPI呼び出しやSSE(Server-Sent Events)に利用されるルート

nuxt.config.js
content: {  // $content api が localhost:3000/content-api で提供されます  apiPrefix: 'content-api'}

dir

  • Type: String
  • Default: 'content'

コンテンツを書くためのディレクトリ。絶対パスを指定できますが、相対パスの場合はNuxt srcDirで解決されます。

nuxt.config.js
content: {  dir: 'my-content' //  my-content/ から contentを読み取ります}

fullTextSearchFields

  • Type: Array
  • Default: ['title', 'description', 'slug', 'text']

全文検索を有効にするため、インデックス化する必要があるフィールド。検索についての詳細はここを参照してください

textは、ASTにパースされる前のMarkdownを含む特別なキーです。

nuxt.config.js
content: {  // title と description だけを検索  fullTextSearchFields: ['title', 'description']}

nestedProperties

  • Type Array
  • Default: []
  • Version: >= v1.3.0

ドット表記やディープフィルタリングを処理するために、入れ子になったプロパティを登録します。

nuxt.config.js
content: {  nestedProperties: ['categories.slug']}

markdown

remarkとrehypeを使って、MarkdownファイルをJSON ASTにコンパイルし、変数bodyに格納します。

以下の説明はremarkPluginsとrehypePluginsの両方に当てはまります。

どのようにMarkdownをパースするか設定するには、次のようにします。

  • 新しいプラグインをデフォルトにする
nuxt.config.js
export default {  content: {    markdown: {      remarkPlugins: ['remark-emoji']    }  }}
  • デフォルトプラグインのオーバーライド
nuxt.config.js
export default {  content: {    markdown: {      remarkPlugins: () => ['remark-emoji']    }  }}
  • ローカルプラグインの利用
nuxt.config.js
export default {  content: {    markdown: {      remarkPlugins: [        '~/plugins/my-custom-remark-plugin.js'      ]    }  }}
  • 定義の中で直接オプションを指定する
nuxt.config.js
export default {  content: {    markdown: {      remarkPlugins: [        ['remark-emoji', { emoticon: true }]      ]    }  }}
  • キャメルケースでプラグインの名前を使ってオプションを指定する
nuxt.config.js
export default {  content: {    markdown: {      // https://github.com/remarkjs/remark-external-links#options      remarkExternalLinks: {        target: '_self',        rel: 'nofollow'      }    }  }}
新しいプラグインを追加するときは、必ずdependenciesにインストールしてください
Yarn
yarn add remark-emoji
NPM
npm install remark-emoji
nuxt.config.js
export default {  content: {    markdown: {      remarkPlugins: ['remark-emoji']    }  }}

markdown.remarkPlugins

  • Type: Array
  • Default: ['remark-squeeze-paragraphs', 'remark-slug', 'remark-autolink-headings', 'remark-external-links', 'remark-footnotes']
  • Version: >= v1.4.0

remark pluginsを参照してください。

markdown.rehypePlugins

  • Type: Array
  • Default: ['rehype-minify-whitespace', 'rehype-sort-attribute-values', 'rehype-sort-attributes', 'rehype-raw']
  • Version: >= v1.4.0

rehype pluginsを参照してください。

markdown.basePlugins

非推奨です。代わりに markdown.remarkPluginsを関数として使用してください。

markdown.plugins

非推奨です。代わりに markdown. remarkPluginsを配列として使用してください。

markdown.prism.theme

  • Type: String
  • Default: 'prismjs/themes/prism.css'

PrismJSを使用してMarkdownコンテンツのコードのシンタックスハイライトを処理します。

これは、Nuxt.jsの設定で希望するPrismJSテーマを自動的にプッシュします。デフォルトのテーマとは異なるテーマを使用したい場合は、prism-themesから選んで変更します。

Yarn
yarn add prism-themes
NPM
npm install prism-themes
nuxt.config.js
content: {  markdown: {    prism: {      theme: 'prism-themes/themes/prism-material-oceanic.css'    }  }}

テーマの組み込みを無効にしたい場合は、prismにfalseを設定します。:

nuxt.config.js
content: {  markdown: {    prism: {      theme: false    }  }}

yaml

  • Type: Object
  • Default: {}

このモジュールは、js-yamlを使用して.yamlと.ymlファイルを解析します。ここでoptionsを確認できます。

json：trueオプションを強制することに注意してください。

xml

  • Type: Object
  • Default: {}

このモジュールは xml2js を用いて .xml ファイルを解析します。optionsはこちらで確認できます。

csv

  • Type: Object
  • Default: {}

このモジュールは、node-csvtojsonを使用してcsvファイルを解析します。ここでoptionsを確認できます。

デフォルトの設定

nuxt.config.js
export default {  content: {    apiPrefix: '_content',    dir: 'content',    fullTextSearchFields: ['title', 'description', 'slug', 'text'],    nestedProperties: [],    markdown: {      remarkPlugins: [        'remark-squeeze-paragraphs',        'remark-slug',        'remark-autolink-headings',        'remark-external-links',        'remark-footnotes'      ],      rehypePlugins: [        'rehype-minify-whitespace',        'rehype-sort-attribute-values',        'rehype-sort-attributes',        'rehype-raw'      ],      prism: {        theme: 'prismjs/themes/prism.css'      }    },    yaml: {},    csv: {},    xml: {}  }}
Table of Contents