いつもSpearlyをご利用いただきありがとうございます。

Spearly運営より、アップデートのお知らせです。

今回はSpeary CMSに関するアップデートです！

Spearly CMSとは？

Spearly CMSは、WEBサイトの記事や画像など、皆様のコンテンツを最高の方法で管理・配信することが可能なヘッドレスCMSです。

Spearly CMSで管理しているコンテンツは、カスタムタグやAPIをもちいて、簡単にサイトに埋め込めます。

コンテンツ管理のためにサーバーは必要ありません。

たった数行のコードでサイトにコンテンツを表示できます。

公式サイトは こちら

Spearly CMSのコンテンツが簡単に取得できる！@spearly/nuxt-module がリリースされました！

Spearly CMSのnuxt-moduleを公開しました！

https://www.npmjs.com/package/@spearly/nuxt-module

nuxt-moduleを導入していただければ、Nuxtの開発における強みとSpearly CMSのコンテンツ運用の強みをシンプルに活かせます。

データを取得するためにエンドポイントの設定などする必要はありません。

できること

• Spearly CMSで管理しているコンテンツやフォームを簡単に取得・描画できる
• 提供しているAPIのエンドポイントをoptionとして簡単に利用できる
• paginationやformなど必要になる機能を用意
• Nuxt 3にも対応

コンポーネントが用意されているため、IDなどをpropsで指定するだけで簡単にコンテンツを単体やリストで取得、描画できます。

なお、@spearly/nuxt-module ではスタイルは提供しておりません。利用いただく方が自分で自由にスタイルを設定できますので、0からスタイルを組み立てることが可能です。

公式ドキュメント

Spearly 公式ドキュメント

@spearly/nuxt-moduleの使い方

基本的にはNuxt.jsのプロジェクトにインストールしていただき、apiキーをconfigに設定するだけで、Spearly CMSのコンテンツやフォームを簡単に描画できるコンポーネントをご利用できます。

詳しい使い方はSpearly Docs、もしくはREADMEをご覧ください。

https://docs.spearly.com/cms/manual/c-sX7z2empGodWCM0Pr81j

導入

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

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

Nuxt 3の導入・セットアップ方法については、公式ドキュメントをご覧ください

https://docs.spearly.com/cms/manual/c-sX7z2empGodWCM0Pr81j

セットアップ

nuxt.config.jsに@spearly/nuxt-module読み込みとAPIキーについての記述をします。

1. まずSpearly CMSの「APIキー」から、APIキーを取得します。
   
2. nuxt.config.js（TypeScriptを使用している場合はnuxt.config.ts）に以下の記述を追加します。
   ※ YOUR_API_KEYは先ほど取得した Spearly CMSのAPIキーを設定してください。
   

   export default {
       ...,
       buildModules: [\'@spearly/nuxt-module\'],
       spearly: {
           options: {
               apiKey: \'YOUR_API_KEY\',
           },
           mode: \'all\',
       },
   }
   

   また、TypeScriptを使用している場合はtsconfig.jsonに以下を追記してください。
   

   {
       "compilerOptions": {
           "types": ["@spearly/nuxt-module"]
       }
   }
   

Spearly CMSのコンテンツの取得方法

spearly-content-listコンポーネントやspearly-contentコンポーネントにidやpropsを渡すことで、コンテンツを一覧や単体で描画します。

コンテンツのリスト取得(speary-content-listコンポーネント)

コンテンツタイプidを指定するだけで、簡単にSpearly CMSのコンテンツの一覧を取得、繰り返し描画できます。

また、ラッパーコンポーネントやローディング用のコンポーネント, paginationになどに必要なslotも用意しており、機能的にSpearly CMSのコンテンツを描画できます。

使い方

<spearly-content-list>　コンポーネントに、idやpropを記述して、コンテンツの一覧を描画します。

※ CONTENT_TYPE_IDENTIFIERはSpearly CMSで作成したコンテンツタイプを参照ください。

[コード例]

<template>
    <spearly-content-list id="CONTENT_TYPE_IDENTIFIER">
        <template v-slot="content"> // コンテンツのデータを受け取ることができます。

                        <header>
              <h1>{{ content.values.title }}</h1>
            </header>
            <div>{{ item.content.values.body }}</div>

        </template>
    </spearly-content-list>
</template>

[実行例]

idを指定して単体で埋め込むspearly-contentコンポーネントも用意してあります。

フォーム埋め込み(spearly-formコンポーネント)

フォームidを指定するだけで、簡単にSpearly CMSのフォームを描画、入力内容の確認、送信まで行うことができます。

また、フォームのslotを使うことで、独自にフォームの内容をカスタマイズすることができます。

コンテンツのコンポーネントと違い、デフォルトで全ての項目のフォームが生成されます。

使い方

<spearly-form>にidとしてSpearly CMSで作成したフォームのidを記述します。

デフォルトでは、id指定だけで十分です。Spearly CMS上で作成したフォームの項目が全て表示されます。

<spearly-form id="FORM_ID" />

デフォルトで用意している機能

• 受付期間外の制御
• 送信時に入力内容確認モーダルの表示

下記のSpearly CMSのフォーム自体の機能も合わせてご利用いただけます。

• フォーム投稿時に、投稿内容を投稿者、作成者にメール通知
• リダイレクト先の指定
• 投稿内容データのcsvインポート
• スパム対策

フォームのカスタマイズ

フォームslotを使うことで、独自にフォームの内容をカスタマイズできます。

• 入力値のバリデーションチェック
• 項目によってvueコンポーネントを呼び出し

など、さまざまなカスタマイズが行えるようになっています。

Nuxt 3にも対応。

正式リリースが待たれるNuxt 3にも対応していますので、Nuxt 3でCMS利用を考えている方は是非お試しください。

@spearly/nuxt-module公式ドキュメント

もっと詳しい情報については、READMEやドキュメントをご覧ください。

npm:  https://www.npmjs.com/package/@spearly/nuxt-module

Spearly Docs:  https://docs.spearly.com/cms/manual/c-sX7z2empGodWCM0Pr81j

Spearly CMSは日々開発、改善をおこなっています！

ユーザーのみなさんにより便利に使っていただけるよう、Spearly CMSは日々改善を行っています。引き続き、Spearlyをよろしくお願いします。

関練する便利な記事

• タグを埋め込むだけでお問い合わせフォームが作成できる！フォーム機能が追加されました
• フォーム回答時に回答内容のメールが届くようになりました！

また、Spearly CMSについてのドキュメントも用意しておりますので、合わせてご覧ください

• フォームを作成しよう/tutorial
• @spearly/nuxt-module/manual