Nuxt 3: Good to know

When switching my personal website to Nuxt 3 I found myself looking and researching all the small things you need to tackle, besides the content, to make it fly. Sitemap, robots.txt, proper page titles, include 3rd party JS and so on. While there is a lot written about a general setup of Nuxt, most blogs almost never talk about these small things.

You can find all of these tips in the repository codedge/codedge.de of this site.

Dynamic page title

Most websites you a similar page title like this:

For example: Home | codedge

Let’s create that.

Prerequisites

• You use the pages feature
• You have a central app.vue

In your app.vue you configure the central title content using the useHead configuration:

1
2
3
4
5
6
7
8

This adds the general part, in my case | codedge, to every title for each page. To add the specific title for a page, open one of your *.vue files in the pages/ directory and add

1
2
3
4
5

to it. This is going to build a title like My fancy title | codedge.

Conditionally load scripts

You might want to load scripts, f. ex. tracking scripts, depending on your environment. I wanted to include the Plausible tracking script only on the production environment.

In you app.vue you can do this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

Make sure, you set your data-domain correctly according to your site.

Using images with Markdown

While including images in your repository might be a fast and straightforward solution you might want to consider using some image service like Cloudinary or Imgix as a central place for your images.

I chose Cloudinary which is supported by the NuxtImage plugin. After setting things up you might want to use this in your Markdown files. Using or does unfortunately not work there. Wrapping this inside a Markdown Component (MDC) helps.

Create a file in components/content/Image.vue and Add

1
2
3
4
5

With that in place you can use NuxtImage in your Markdown files by writing

1
2

::image{imgSrc=""}
::

A 404 component

You want to serve a custom 404 page, properly styled, whenever a visitor hits an unknown sub-page of your site. Instead of customizing the error.vue file, as suggested by other people, I went for writing a custom component which only deals with the 404 error.

Add a file components/NotFound.vue and add the following:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

Additionally to the content itself, we modify the page title and returning a proper 404 http status code.

I use this component in my pages/[...slug.vue] file (see here) file. So whenever a request is matched by this catchall route, deliver the 404 page, as probably no other content was found.

Sitemap

Currently neither Nuxt 3 or the Content module provides a way to generate a sitemap in the default installation. Luckily this is quick win to set up yourself.

First, install the NPM package sitemap by running yarn add -D sitemap. Second, create a file server/routes/sitemap.xml.ts with the content

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

import { serverQueryContent } from "#content/server";
import { SitemapStream, streamToPromise } from "sitemap";

export default defineEventHandler(async (event) => {
 const docs = await serverQueryContent(event).find();
 const sitemap = new SitemapStream({
 hostname: "",
 });

 for (const doc of docs) {
 sitemap.write({
 url: doc._path,
 changefreq: "monthly",
 });
 }
 sitemap.end();

 return streamToPromise(sitemap);
});

Don’t forget to update the hostname in the code. You can now open your sitemap at https://your-domain/sitemap.xml.