nuxt-module-feed
Feed module enables everyone to have RSS, Atom and JSON.
Features
- Nuxt 3 ready
- Three different feed types (RSS 2.0, ATOM 1.0 and JSON 1.0)
- Completely customizable
- Multiple feeds
- Works with all modes (SSR, SSG)
Quick Setup
- Add
nuxt-module-feed
dependency to your project
# Using pnpmpnpm add -D nuxt-module-feed# Using yarnyarn add --dev nuxt-module-feed# Using npmnpm install --save-dev nuxt-module-feed
- Add
nuxt-module-feed
to themodules
section ofnuxt.config.ts
export default defineNuxtConfig({ modules: ["nuxt-module-feed"],});
That's it! You can now use nuxt-module-feed in your Nuxt app ✨
Configuration
You can pass configuration to the module in the nuxt.config.ts
like following:
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 Hooks
feed:generate
Type: async (ctx: { feed: Feed, options: SourceOptions }) => void | Promise<void>
This hook allows you to modify the feed as runtime before it is sent to the client.
Feed creation is based on the feed package. Please use it as reference and further documentation for modifying the feed object that is passed to the create function.
Note: It works for SSG and prerendered pages.
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/", }); }});
Here is an example.
Development
# Install dependenciespnpm install# Generate type stubspnpm run dev:prepare# Develop with the playgroundpnpm run dev# Build the playgroundpnpm run dev:build# Run ESLintpnpm run lint# Run Vitestpnpm run testpnpm run test:watch# Release new versionpnpm run release