RSS Feeds

provides the @islands/feed module to generate RSS, Atom, and JSON feeds.

Adding a Feed

Create a .vue file under pagesDir and use the <page> block to specify a path for the feed.

<page>
path: /feed.atom
</page>

Recommended Extensions

Use .atom for Atom feeds, .rss for RSS feeds, and .json for JSON feeds.

@islands/feed provides a RenderFeed component:

<template>
  <RenderFeed format="atom" :options="options" :items="items"/>
</template>

During development, this component will render an HMR-enabled preview, allowing you to iterate quickly and make sure the data looks right.

When building the site, it will use the feed package to generate a feed using the specified format. You can choose between rss, atom, and json.

Besides items, you can also provide categories, contributors, and extensions.

Configuring the Feed

You can use <script setup> to provide the options and items for the feed, which allows you to import code or data as needed, including composables such as usePage.

<script setup lang="ts">
import type { FeedOptions } from '@islands/feed'

const { site } = usePage()

const url = site.url

const options: FeedOptions = {
  title: 'The Vue Point',
  description: 'The official blog for the Vue.js project',
  id: url,
  link: url,
  language: 'en',
  image: 'https://vuejs.org/images/logo.png',
  copyright: 'Copyright (c) 2021-present',
}
</script>

The @islands/feed package exposes the types provided by feed, which are convenient to enable intellisense and type-checking for the feed options and items.

Adding Items to the Feed

useDocuments is a convenient way to access multiple files or pages to generate feed items.

import type { FeedItem } from '@islands/feed'

const posts = $(useDocuments('~/pages/posts'))

const items = posts.map<FeedItem>((post) => ({
  link: url + post.href,
  date: post.date,
  title: post.title,
  description: post.description,
  content: post,
}))

See this full example as a configuration reference.

Using External Content

supports async rendering, so you can also fetch remote content as needed:

import { $fetch } from 'ohmyfetch'

const { posts } = await $fetch('/api/posts')

Generating a Feed Manually

If you have a large amount of pages and rendering the feed is taking long, you can leverage ssg.onSiteRendered to access all rendered pages. You can extract the content from each page.rendered, and use the feed package to generate a feed.