Adding Images To Markdown With Nuxt Content Module

Ever wondered how to add images to a Nuxt Content blog post? well it turns out to be pretty simple. All you need to do is create a global image component that we can render inside the markdown posts.

1. Create a dynamic image component

Let's create a new component that's going to be used for our dynamic image. In components we create a new file VImg.vue with the following contents.

  <picture class="image">

export default {
  name: 'VImg',
  props: {
    src: {
      type: String,
      required: true
    alt: {
      type: String,
      required: true
  computed: {
    imgSrc () {
      return require(`~/assets/blog/${this.src}`)

<style lang="scss" scoped>
picture {
  width: 100%;
  height: 100%;
  margin: auto;
  display: flex;
  img {
    width: 100%;
    height: 100%;
    margin: auto;
    object-fit: contain;
    padding-bottom: 1rem;

2. Create a global vue plugin

We register the new component by creating a plugin.

In the plugins folder we create a new vimg.js file

import Vue from "vue";
import VImg from "@/components/global/VImg.vue";

Vue.component("VImg", VImg);

Make sure you add the plugin to your nuxt.config.js

 plugins: [

Now we should be able to reference the images inside the markdown files with Nuxt Content like this.

<v-img src="image.png" alt="image alt text"></v-img>

Make sure you close the tag correctly or it won't render.