NuxtContent の search で検索機能を実装する

🧪 前提

NuxtContent の検索機能である search は、2024年8月15日時点で実験的な機能です。

今後、仕様が変更されたり、機能そのものが外される可能性があります。

もし、search を使用する場合は nuxt.config.ts を以下のように設定する必要があります。

export default defineNuxtConfig({
  content: {
    experimental: {
      search: true
    }
  }
})

🛠 検索機能の実装

今回、検索機能のロジックは composable として切り出して作成しました。

次のコードを記述するだけで検索機能を実装することができます。

export function useSearch() {
  const keyword = ref<string>("");

  const results = computedAsync(async () => {
    return await searchContent(keyword.value);
  }, null);

  return {
    keyword,
    results,
  };
}

computedAsync は、VueUse の composable です。

公式サイトの通りに進めると私の環境では検索結果がリアクティブに変更されなかったため、computedAsync を使用してリアクティブに検索結果を取得できるようにしました。

💚 検索処理の呼び出し

あとは作成した composable を呼び出し、検索キーワードを入力するフォームと検索結果を表示する要素を用意するだけです。

<script lang="ts" setup>
const { keyword, results } = useSearch();
</script>

<template>
  <input v-model="keyword" type="search" placeholder="記事を検索する" />
  <p>{{ results }}</p>
</template>

✅ まとめ

簡単に検索を実装することができるため、正式な機能としてリリースされることを期待したいです。