Nuxt3(Vue3)でnote.apiをFetchしてnote投稿記事を表示するTIPS

Nuxt3にて、noteのAPIを使用して、noteの投稿記事を一覧表示させたので、その方法です。

まず下記URL辺りを参考にnoteのapiエンドポイントを取得します。note.apiの構造については下記URLがとても参考になりました。

https://note.com/hagure_melon/n/n964ff6f7ad0e

Nuxt3の標準的な機能であるserverディレクトリでapiを設定します。

参考：Nuxt3ドキュメントの和訳サイト

https://zenn.dev/mm67/articles/nuxt3-server-directory

export default async function () {
    try {
      const response = await fetch('APIエンドポイント');
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      const data = await response.json();
      return data;
    } catch (error) {
      console.error('Error fetching posts:', error);
      throw error;
    }
  }

apiディレクトリ配下、post.apiに以上のようなコードを記述してエンドポイントからjsonデータを返します。

フロントエンドのvueファイルでfetchしたjsonを展開するコードは以下です。