Nuxt Content Assets

Enable locally-located assets in Nuxt Content

Overview

Nuxt Content Assets enables locally-located assets in Nuxt Content (opens new window):

+- content
    +- posts
        +- 2023-01-01
            +- index.md
            +- media
                +- featured.png
                +- mountains.jpg
                +- seaside.mp4

In your documents, reference assets with relative paths:

---
title: Summer Holiday
featured: media/featured.png
---

I loved being in the mountains.

![mountains](media/mountains.png)

Almost as much as being in the sea!

:video{src="media/seaside.mp4"}

At build time the module collates and serves (opens new window) assets and content together.

Features

Built on top of Nuxt Content (opens new window) and compatible with any Nuxt Content project, including Docus (opens new window) and Nuxt Image (opens new window).

User experience:

  • co-locate assets with content files
  • reference assets using relative paths
  • supports any format (image, video, doc)

Developer experience:

  • works with tags and custom components
  • works in markdown and frontmatter
  • file watching and asset live-reload
  • image size injection
  • zero config

So...

I hope you found this post interesting or inspiring.

If you want to engage further, follow me on Twitter or drop a comment or reaction below.

Either way, thanks for reading!