View source for Nuxt (SEO, Content, UI)

=Introduction= 
Wanted, thought I should make a blog to keep my content changing so decided this was the approach
=Content=
So my goal was to make it as easy as possible to write articles without have to rethink everything. Markdown is something I have not used a lot and therefore would provide so benefit. This is how far I have gotten. Installed @nuxt/content, @nuxtjs/seo, enabled them in nuxt.config.ts. Installed plugin remark-reading-time. Here is the content from nuxt.config.ts which adds the plugin and defines which language themes to load.
<syntaxhighlight lang="ts">
export default defineNuxtConfig({
...
    content: {
        build: {
            markdown: {
                highlight: {
                    theme: 'github-dark-dimmed',
                    preload: ['csharp', 'cs', 'xml', 'sql', 'c', 'php'],
                },
                toc: {
                    depth: 3,
                    searchDepth: 2,
                },
                remarkPlugins: {
                    'remark-reading-time': {},
                },
            },
        },
    },
})

And the content.config.ts which defines the schema.

</syntaxhighlight>

<syntaxhighlight lang="ts">
import { defineCollection, defineContentConfig } from '@nuxt/content'
import { defineSitemapSchema } from '@nuxtjs/sitemap/content'
import { z } from 'zod'

export default defineContentConfig({
    collections: {
        articles: defineCollection({
            type: 'page',
            source: 'articles/**/*.md',
            schema: z.object({
                title: z.string(),
                date: z.date(),
                description: z.string(),
                tags: z.optional(z.array(z.string())),
                author: z.string(),
                author_avatar: z.string(),
                author_description: z.string(),
                thumbnail: z.string(),
                rawbody: z.string(),
                sitemap: defineSitemapSchema({
                    name: 'articles',
                    loc: entry => entry.path,
                    onUrl: url => {
                        url.priority = 0.7
                    },
                }),
            }),
        }),
    },
})
</syntaxhighlight>
To generate the types run this
<syntaxhighlight lang="bash">
npx nuxi prepare
</syntaxhighlight>
So my articles are under content/articles and contain
<syntaxhighlight lang="md">
---
title: "NANO EEPROM using a Nano"
date: 2025-05-27
description: A first bash at an EEPROM programmer
tags: [nano micro-controller]
author: Iain (Bill) Wiseman
author_avatar: /assets/avatars/windy_avatar.jpg
author_description: "Morning Windy"
thumbnail: /assets/articles/nano-eeprom-page.jpeg
---
A while ago, I started my interest in the 6502, where it all began for me. This led me to Ben Eater and building an 8-bit computer, which in turn led me to building an EEPROM programmer that required a Nano. I had a bit of work to do, and my interest seemed to be waning a little—partly because of the time it took to get it working and partly because I just felt demotivated. I solved my motivation problem by returning to Rust and saw that it is possible to run it on a Nano Every. Let the games begin.
</syntaxhighlight>