Nuxt Content Assets

Enable locally-located assets in Nuxt Content

Apr 2023April 2023
davestewart/nuxt-content-assets
librarynuxtvue

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 perhaps useful.

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

Either way, thanks for reading!