How to add a document to an RSS feed by adding a simple drop-in module

There is already an official doc article about how to create an RSS feed from Nuxt Content. But it only adds the excerpt as the actual content. Most feed readers allow the reader to read the whole article right in the app without a context switch. This article will present a way to add the whole document to the RSS feed by adding a simple drop-in module.

The problem with HTML code outside the nuxt-content component

Nuxt Content is a great static CMS that makes it incredibly easy to setup a performant Markdown-based blog without the need to add loads of third party services.

The heart of the system…


Hey folks, today I want to show you how to generate flowchart diagrams in a Vue or Nuxt application using vue-mermaid-string and nuxt-mermaid-string. They both help to integrate the wonderful Mermaid library into your Vue-based projects.

Setup

Alright, let’s stick to Vue for now and see later how it works for Nuxt. First we need to install the component.

There are several ways to add the component to your project. The quickest solution is via CDN like this:

Note that you also need to add itself.

Alternatively, install it via a package manager:

And register the…


Hey folks, this article is about accessing page data in route objects. It’s a use case I have frequently stumbled upon, for example when generating sitemaps.

Nuxt pages allow you to define structural data like the meta property or the auth property from @nuxtjs/auth (note that they should not be confused with meta tags). It would be great to be able to access them elsewhere. The route object can be accessed at quite a lot of places:

  • in
  • in components
  • in modules
  • in Middlewares

I did some testing and found out that the only possibility…


Example source code using with-local-tmp-dir and output-files to create temporary files
Example source code using with-local-tmp-dir and output-files to create temporary files

Hey guys, this post is about writing tests for projects that access the file system by reading and writing files to disk.

A lot of my past projects in some way had to do with file access. I started to test with mocking libraries like mock-fs, but soon recognized that they do not work for all cases, and sometimes you are using third party libraries internally that you cannot mock easily. So I thought of a different solution and the one I’m using right now for most projects actually uses real files.

with-local-tmp-dir and output-files

Why not use real files for testing instead…


I recently tried out @nuxt/content, a Git-based CMS for Nuxt projects. And I really like it! It allows me to write markdown files and host them right in my existing project.

One thing I noticed when deploying the project to my server was that the and fields were always reset and didn't reflect the actual dates. The reason for this is that Git does not keep file metadata. This means that the timestamps that relies on are of no use.

Git to the rescue!

One way to fix this is not to use the file stats, but to instead use the…


Modernizr is a package that detects browser features and makes them queriable via JavaScript and CSS. This is very handy to find out which CSS properties are supported, for example. The approach is much more flexible and stable than using browser vendor and version for this. I wrote a module that allows to use Modernizr with Nuxt.js.

Using Modernizr with Nuxt.js

Modernizr uses a plugin-based architecture, and you have to build the package yourself, depending on the features you need to detect — at least if you are not using Nuxt.js! I have created the nuxt-modernizr module that makes it easy to add Modernizr…


Snapshot testing is a testing mechanism that for long has seemed to be exclusive to Jest. The main idea is to generate expected values into a separate file and to compare the actual tested values with these saved values. It is also possible to update snapshots by passing an environment variable. This testing approach is great for complex data like large strings, DOM content, or images. I wrote a package to use image snapshot testing also with Mocha.

Snapshot testing with Jest

Snapshot testing itself is a built-in feature of Jest, and when searching specifically for image snapshots, you’ll quickly find jest-image-snapshot, which does…


When I started to work with Nuxt.js, I frequently had the problem that I wanted so send emails via a contact form. While there are third party services to do that, I thought: Why not use the existing server infrastructure that comes with Nuxt.js?

That is why I wrote nuxt-mail, a Nuxt.js module that adds a route to the server and injects a variable that wraps the API call.

Usage

You start by installing the module and @nuxtjs/axios via or .

is important here because it allows the module to do…

Sebastian Landwehr

I’m Sebastian Landwehr, a web developer from Bonn in Germany. My passion is all about JavaScript, Nuxt.js and Firebase.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store