DEV Community

loading...

Nuxt feed module help

Chloe
Web developer looking to develop my skills further particularly around JavaScript and Vue/Nuxt and then learning some React
・2 min read

I'm currently in process of moving my blog from gridsome to nuxt most of it has been fairly straightforward, however generating a feed so I can cross post on here is proving more difficult.

I've used the example set out in the integration docs for nuxt/content module added what I need to I think but it throws an error when I try and localhost:3000/feed.xml so not entirely sure what I am doing wrong. This is what I see in terminal:

 ✖ Nuxt Fatal Error                           
   Error while executing feed creation function  
Enter fullscreen mode Exit fullscreen mode

and this isnuxt.config.js:

const fs = require('fs').promises;
const path = require('path');

let posts = [];

const constructFeedItem = (post, dir, hostname) => {  
  const url = `${hostname}/${dir}/${post.slug}`;
  return {
    title: post.title,
    id: url,
    link: url,
    description: post.description,
    content: post.bodyPlainText
  }
} 

const create = async (feed, args) => {
  const [filePath, ext] = args;  
  const hostname = process.NODE_ENV === 'production' ? 'https://my-production-domain.com' : 'http://localhost:3000';
  feed.options = {
    title: "My Web Dev Blog",
    description: "Documenting my web dev learnings",
    link: `${hostname}/feed.${ext}`
  }
  const { $content } = require('@nuxt/content')
  if (posts === null || posts.length === 0)
    posts = await $content(filePath).fetch();

  for (const post of posts) {
    const feedItem = await constructFeedItem(post, filePath, hostname);
    feed.addItem(feedItem);
  }
  return feed;
}


export default {
  // Target (https://go.nuxtjs.dev/config-target)
  target: 'static',

  // Global page headers (https://go.nuxtjs.dev/config-head)
  head: {
    title: 'Web Developer Portfolio and Blog',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS (https://go.nuxtjs.dev/config-css)
  css: [
    '@fortawesome/fontawesome-svg-core/styles.css'
  ],

  // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
  plugins: [
    '~/plugins/fontawesome.js'
  ],

  // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
  buildModules: [
    // https://go.nuxtjs.dev/tailwindcss
    '@nuxtjs/tailwindcss',
  ],

  // Modules (https://go.nuxtjs.dev/config-modules)
  modules: [
    // https://go.nuxtjs.dev/content
    '@nuxt/content', 
    '@nuxtjs/feed'

  ],

  feed: [
    {
      path: '/feed.xml',
      create,
      cacheTime: 1000 * 60 * 15,
      type: 'rss2',
      data: [ 'blog', 'xml' ]
    },
  ], 
  hooks: {
    'content:file:beforeInsert': (document) => {
      if (document.extension === '.md') {      
        document.bodyPlainText = document.text;
      }
    },
  },
Enter fullscreen mode Exit fullscreen mode

Anyone have some experience with this? The example in the feed module docs on github uses axios which I don't want/need as I can use @nuxt/content. What am I doing wrong?

Discussion (0)

Forem Open with the Forem app