nuxt-module-feed

フィードモジュールを使用すると、誰でも RSS、Atom、JSON を利用できるようになります。

✨ リリースノート

機能

Nuxt 3 対応
3種類のフィード形式（RSS 2.0、ATOM 1.0、JSON 1.0）
完全カスタマイズ可能
複数フィードに対応
すべてのモード (SSR, SSG) で動作

クイックセットアップ

プロジェクトに nuxt-module-feed を依存関係として追加します。

# Using pnpm
pnpm add -D nuxt-module-feed

# Using yarn
yarn add --dev nuxt-module-feed

# Using npm
npm install --save-dev nuxt-module-feed

nuxt-module-feed を nuxt.config.ts の modules セクションに追加します。

export default defineNuxtConfig({
  modules: ["nuxt-module-feed"],
});

以上です！これで Nuxt アプリで nuxt-module-feed を使用できます ✨

設定

以下のように、nuxt.config.ts 内でモジュールに設定を渡すことができます。

export default {
  feed: {
    sources: [
      {
        path: "/feed.xml", // The route to your feed.
        type: "rss2", // Can be: rss2, atom1, json1
        cacheTime: 60 * 15, // How long should the feed be cached
      },
      {
        path: "/feed2.xml", // The route to your feed.
        type: "rss2", // Can be: rss2, atom1, json1
        cacheTime: 60 * 15, // How long should the feed be cached
      }
      ...
    ]
  },
};

Nitroフック

`feed:generate`

型: async (ctx: { feed: Feed, options: SourceOptions }) => void | Promise<void>

このフックを使用すると、クライアントに送信される前に、実行時にフィードを変更できます。

フィードの作成は、feed パッケージに基づいています。create関数に渡されるフィードオブジェクトの変更については、そちらを参考資料として使用してください。

注意: SSGおよびプリレンダリングされたページで機能します。

import type { NitroCtx, Feed } from "nuxt-module-feed";

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook("feed:generate", async ({ feed, options }: NitroCtx) => {
    switch (options.path) {
      case "/feed.xml": {
        createTestFeed(feed);
        break;
      }
      case "/feed2.xml": {
        createTestFeed(feed);
        break;
      }
      ...
    }
  });

  function createTestFeed(feed: Feed) {
    feed.options = {
      id: "Test Feed",
      title: "Test Feed",
      copyright: "Test company",
    };

    type Post = {
      title: string;
      url: string;
      description: string;
      content: string;
      date: Date;
      image: string;
    };

    const posts: Post[] = [
      {
        title: "Post 1",
        url: "https://example.com/post-1",
        description: "This is the first post",
        content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
        date: new Date("2022-01-01"),
        image: "https://example.com/images/post1.jpg",
      },
      {
        title: "Post 2",
        url: "https://example.com/post-2",
        description: "This is the second post",
        content:
          "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
        date: new Date("2022-01-05"),
        image: "https://example.com/images/post2.jpg",
      },
      {
        title: "Post 3",
        url: "https://example.com/post-3",
        description: "This is the third post",
        content:
          "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
        date: new Date("2022-01-10"),
        image: "https://example.com/images/post3.jpg",
      },
      {
        title: "Post 4",
        url: "https://example.com/post-4",
        description: "This is the fourth post",
        content:
          "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
        date: new Date("2022-01-15"),
        image: "https://example.com/images/post4.jpg",
      },
      {
        title: "Post 5",
        url: "https://example.com/post-5",
        description: "This is the fifth post",
        content:
          "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
        date: new Date("2022-01-20"),
        image: "https://example.com/images/post5.jpg",
      },
    ];

    posts.forEach((post) => {
      feed.addItem({
        title: post.title,
        id: post.url,
        link: post.url,
        description: post.description,
        content: post.content,
        date: post.date,
      });
    });

    feed.addCategory("Nuxt.js");

    feed.addContributor({
      name: "Miha Sedej",
      email: "sedej.miha@gmail.com",
      link: "https://tresko.dev/",
    });
  }
});

ここに例があります。

開発

# Install dependencies
pnpm install

# Generate type stubs
pnpm run dev:prepare

# Develop with the playground
pnpm run dev

# Build the playground
pnpm run dev:build

# Run ESLint
pnpm run lint

# Run Vitest
pnpm run test
pnpm run test:watch

# Release new version
pnpm run release