1. TOP
  2. Spearly CMS
  3. マニュアル
  4. @spearly/nuxt-module

@spearly/nuxt-module

Spearly CMSでは、Nuxt.js用のモジュール、@spearly/nuxt-moduleを提供しています。
このモジュールを導入することで、簡単にNuxt.jsプロジェクトにSpearly CMSのコンテンツを表示したりすることができるようになります。

@spearly/nuxt-module

インストール方法

以下のいずれかを使用して、Nuxt.jsのプロジェクトにインストールします。

$ npm i -S @spearly/nuxt-module
$ yarn add @spearly/nuxt-module

Nuxt3を使用している場合

Nuxt3版は現在next版として提供しているため、以下でインストールしてください。

$ npm i -S @spearly/nuxt-module@^1.0.0-next.0
$ yarn add @spearly/nuxt-module@^1.0.0-next.0
なお、Nuxt3は現在RC版のため、Nuxt3の開発次第ではモジュールが動かなくなることがあります。あらかじめご了承ください。

セットアップ

nuxt.config.js（TypeScriptを使用している場合はnuxt.config.ts）に以下の記述を追加します。

export default {
    ...,
    buildModules: ['@spearly/nuxt-module'],
    spearly: {
        options: {
            apiKey: 'YOUR_API_KEY',
        },
        mode: 'all',
    },
}
また、TypeScriptを使用している場合はtsconfig.jsonに以下を追記してください。
{
    "compilerOptions": {
        "types": ["@spearly/nuxt-module"]
    }
}

Nuxt3を使用している場合

Nuxt3の場合は、nuxt.config.tsの書き方が以下になります。

export default defineNuxtConfig({
    ...,
    modules: ['@spearly/nuxt-module', { apiKey: 'YOUR_API_KEY' }],
})
※ YOUR_API_KEYはSpearly CMSのAPIキーを設定してください。

spearly-content-listコンポーネント

spearly-content-listコンポーネントは、コンテンツ一覧を描画するコンポーネントです。

props一覧

nametype （）はデフォルト値説明
id *必須string取得するコンテンツタイプのIDを指定します。public_uidもしくはidentifierを指定してください。
limitnumber（10）取得件数を制限します。
offsetnumber（0）取得開始位置を指定します。
order'desc', 'asc'（'desc'）ソートの指定です。published_atに対して行われます。order-byとの併用はできません。
order-by'latest', 'popular', stringlatestは公開日時、popularは閲覧数の降順でソートします。
filter-bystring特定のフィールドと指定する値でフィルタリングします。filter-byはフィルタリングしたいフィールドのIDを指定します。
filter-valueとセットで使用します。
filter-valuestringフィルタリングしたいフィールドの値を指定します。部分一致で検索されます。
filter-byとセットで使用します。
filter-refstring参照コンテンツに対するフィルタリングです。filter-refには参照コンテンツのフィールドIDを指定し、filter-by、filter-valueで参照先のコンテンツのフィールドID、値を指定します。
range-tostring指定した日付より以前に公開されたコンテンツを取得します。
range-fromstring指定した日付より後に公開されたコンテンツを取得します。
wrapperstring一覧のラッパーコンポーネントを指定できます。詳しくは「ラッパーコンポーネントの置き換え」をご覧ください。
itemstringコンテンツのラッパーコンポーネントを指定できます。詳しくは「ラッパーコンポーネントの置き換え」をご覧ください。
loadingstringローディング時に表示するコンポーネントを指定できます。詳しくは「ローディングの表示」をご覧ください。

基本的なコード例

<template>
    <spearly-content-list id="CONTENT_TYPE_IDENTIFIER">
        <template v-slot="item"> // コンテンツのデータを受け取ることができます。
            <nuxt-link :to="`/${item.content.attributes.publicUid}`">
                {{ item.content.values.title }}
            </nuxt-link>
        </template>
    </spearly-content-list>
</template>

ラッパーコンポーネントの置き換え

一覧のラッパーのコンポーネントと各コンテンツのラッパーのコンポーネントは、以下のpropを使用することで独自のコンポーネントに変更できます。

  • wrapper prop：一覧全体のラッパーのコンポーネント名もしくはHTMLを指定できます。
  • item prop：コンテンツのコンポーネント名もしくはHTMLを指定できます。
例えば、ContentListとContentItemというコンポーネントを使いたい場合、以下のように指定することができます。
<template>
    <spearly-content-list id="CONTENT_TYPE_IDENTIFIER" wrapper="ContentList" item="ContentItem">
        <template v-slot="item">
            <nuxt-link :to="`/${item.content.attributes.publicUid}`">
                {{ item.content.values.title }}
            </nuxt-link>
        </template>
    </spearly-content-list>
</template>

ページネーションの作成

ページネーション作成用に、pager slotが用意されています。
pager slotでは以下のページングに必要なスロットプロパティを受け取ることができるため、これを使ってページネーションを作成することができます。
  • limit（number）：取得件数
  • offset（number）：取得時に使用したオフセット
  • next（number）：次のページのオフセット
  • matchingContentsCount（number）：取得条件にマッチしたコンテンツの件数
  • totalCountentsCount（number）：コンテンツタイプに登録されたコンテンツの件数
例えば、次へ / 前へのような前後ボタンを設置したい場合、以下のように指定することで実現できます。
<template>
    <spearly-content-list id="CONTENT_TYPE_IDENTIFIER" :limit="10" :offset="offset">
        <template v-slot="item">
            <nuxt-link :to="`/${item.content.attributes.publicUid}`">
                {{ item.content.values.title }}
            </nuxt-link>
        </template>
           <template #pager="data">
               <button v-if="data.paging.offset > 0" @click="offset -= 10">前へ</button>
               <button v-if="data.paging.next > 0" @click="offset += 10">次へ</button>
           </template>
    </spearly-content-list>
</template>

ローディングの表示

loading propを使用することで、記事の読み込み中にローディングを表示させることができます。

<template>
    <spearly-content-list id="CONTENT_TYPE_IDENTIFIER" loading="Loading">
        <template v-slot="item">
            <nuxt-link :to="`/${item.content.attributes.publicUid}`">
                {{ item.content.values.title }}
            </nuxt-link>
        </template>
    </spearly-content-list>
</template>

spearly-contentコンポーネント

spearly-contentはコンテンツを描画するためのコンポーネントです。
コンテンツ詳細ページなどでの使用を想定しています。

props一覧

nametype説明
id *必須stringSpearly CMSのエイリアスなどに表示されているコンテンツのIDを指定してください。
loadingstringローディング時に表示するコンポーネントを指定できます。詳しくは「ローディングの表示」をご覧ください。
preview-tokenstringコンテンツのプレビューを表示したい場合に指定します。Spearly CMSで発行されるプレビュートークンを指定してください。

基本的なコード例

<template>
    <spearly-content id="CONTENT_PUBLIC_UID">
        <template v-slot="content"> // コンテンツのデータを受け取ることができます。
            <header>
                <h1>{{ content.values.title }}</h1>
            </header>
            <div v-html="content.values.body" />
        </template>
    </spearly-content>
</template>

ローディングの表示

loading propを使用することで、記事の読み込み中にローディングを表示させることができます。

<template>
    <spearly-content id="CONTENT_PUBLIC_UID" loading="Loading">
        <template v-slot="content">
            <header>
                <h1>{{ content.values.title }}</h1>
            </header>
            <div v-html="content.values.body" />
        </template>
    </spearly-content>
</template>

プレビューの表示

preview-token propを指定することで、下書きのコンテンツをプレビューすることができます。

<template>
    <spearly-content :id="$route.query.content_id" :preview-token="$route.query.preview_token">
        <template v-slot="content">
            <header>
                <h1>{{ content.values.title }}</h1>
            </header>
            <div v-html="content.values.body" />
        </template>
    </spearly-content>
</template>
上記の例はURL QueriesでコンテンツIDとプレビュートークンを受け取って表示することを想定しています。

spearly-formコンポーネント

spearly-formは、Spearly CMSで作成したフォームの表示、入力内容の確認、送信までを行うことのできるコンポーネントです。

props一覧

nametype説明
id *必須stringSpearly CMSの埋め込み用フォームIDを指定してください。
loadingstringコンテンツのプレビューを表示したい場合に指定します。Spearly CMSで発行されるプレビュートークンを指定してください。

基本的なコード例

<template>
    <spearly-form id="FORM_ID" />
</template>

ローディングの表示

loading propを使用することで、フォームの読み込み中にローディングを表示させることができます。

<template>
    <spearly-form id="FORM_ID" loading="Loading" />
</template>

フォームのカスタマイズ

フォームslotを使うことで独自にフォームの内容を作ることもできます。
なおフォームには、必ず空文字列の _spearly_gotcha を含めてください。
_spearly_gotchaはスパム対策用のフィールドのため、画面上にも見えないフィールドとして以下のコードサンプルのように設置する必要があります。
<template>
  <spearly-form id="FORM_ID">
    <template v-slot="form"> // フォームのデータを受け取ることができます
      <fieldset v-for="field in form.fields" :key="field.identifier">
        <label :for="field.identifier">
          {{ field.name }}
          <i v-if="field.required">*</i>
        </label>

        <input
          :id="field.identifier"
          v-model="answers[field.identifier]"
          :required="field.required"
          type="text"
        />
      </fieldset>
      ...
      <input v-model="answers._spearly_gotcha" type="text" style="position: absolute; width: 1px; height: 1px; overflow: hidden;" />
      <button @click="form.submit(answers)">Submit</button> // フォームの送信は form.submit を呼び出すことで実行できます
    </template>
  </spearly-form>
</template>

<script>
export default {
  data() {
    return {
      answers: {
        YOUR_FORM_FIELD_ID: '',
        ...,
        _spearly_gotcha: '',
      }
    }
  }
}
</script>
nuxt3の場合：
<template>
  <spearly-form id="FORM_ID">
    <template v-slot="form"> // フォームのデータを受け取ることができます
      <fieldset v-for="field in form.fields" :key="field.identifier">
        <label :for="field.identifier">
          {{ field.name }}
          <i v-if="field.required">*</i>
        </label>

        <input
          :id="field.identifier"
          v-model="state.answers[field.identifier]"
          :required="field.required"
          type="text"
        />
      </fieldset>
      ...
      <input v-model="answers._spearly_gotcha" type="text" style="position: absolute; width: 1px; height: 1px; overflow: hidden;" />
      <button @click="form.submit(answers)">Submit</button> // フォームの送信は form.submit を呼び出すことで実行できます
    </template>
  </spearly-form>
</template>

<script lang="ts" setup>
const state = reactive({
  answers: {
    YOUR_FORM_FIELD_ID: '',
    ...,
    _spearly_gotcha: '',
  },
})
</script>

最終更新日: