Nuxt Content Assets and Nuxt Content V3

[frank-laemmer]

First off: Props and thanks to Dave for creating an maintaining Nuxt Content Assets!

I am about to upgrade a Nuxt Content project to V3. I assume Nuxt Content Assets will not be compatible (at least I haven't found details)? So I'd like to get some perspective on that. I saw a question here if this package is still maintained. So:

• What's required for 'Nuxt Content Assets' to support 'Nuxt Content V3'?
• Are there plans to update this package? Maybe by whom?
• Are there maybe known alternatives?

[JuanmanDev]

Hello!
I have the same issue, I created a basic solution for my webpage, it's not perfect, but it's works (90%)

I use it to have images for the blog, but maybe other people uses it to any other file that htis code may not work.
On my markdown i have relative paths to the images to be able to previws it with the vscode markdown viuewer, but maybe this is not your case.

You would need to transform all queries you have done to get data:

  const { data: post } = await useAsyncData('page-' + path, async () => {
    return queryCollection('content').path(path).first();
  }, {
    transform: (data) => {
      data.body.value = updateImageSources(data.body.value, data.path);
      return data;
    }
  })

You would need to define this helpers for transform:

export function joinPaths(...parts) {
  // Remove empty parts and trim slashes
  const cleanParts = parts
      .map(part => part.trim().replace(/^\/+|\/+$/g, ''))
      .filter(Boolean);

  // If the path starts with 'posts/', prepend 'content'
  if (cleanParts[0] === 'posts') {
    cleanParts.unshift('content');
  }

  let part1 = parts[0];
  let part2 = parts[1];

  if (part2.startsWith('../')) {
    part1 = part1.split('/');
    part1.pop();
    parts[0] = part1.join('/');
  }

  const x = parts.join("/").split("/");

  let finalPath = [];

  for (let i = 0; i < x.length; i++) {
    const element = x[i];
    if (element === '') continue;
    if (element === '..') {
        finalPath.pop();
      }
    else if (element === '.') {
      continue;
      // finalPath.pop();
    } else {
      finalPath.push(element);
    }
  }

  return "/" + finalPath.join('/');
}

export function updateImageSources(arr, postPath) {
  if (!Array.isArray(arr)) {
      return arr;
  }

  // Process current array
  if (arr[0] === 'img' && typeof arr[1] === 'object') {
      // Update src attribute if it exists and is relative
      if (arr[1].src && !arr[1].src.startsWith('http') && !arr[1].src.startsWith('//')) {
        arr[1].src = joinPaths(postPath, arr[1].src);
      }
  }

  // Recursively process remaining elements
  for (let i = 2; i < arr.length; i++) {
      if (Array.isArray(arr[i])) {
          arr[i] = updateImageSources(arr[i], postPath);
      }
  }

  return arr;
}

If you use a static web page system like vercel, you would need to fix it:

In nuxt config:

  nitro: {
    plugins: ['~/scripts/copy-content-images']
  }

and the plugin itself:

import { promises as fs } from 'fs'
import { join, relative, dirname } from 'path'

async function exists(path: string) {
  try {
    await fs.access(path)
    return true
  } catch {
    return false
  }
}

async function copyPngFiles(sourcePath: string, targetPath: string) {
  try {
    const entries = await fs.readdir(sourcePath, { withFileTypes: true })

    for (const entry of entries) {
      const srcPath = join(sourcePath, entry.name)
      
      if (entry.isDirectory()) {
        await copyPngFiles(srcPath, targetPath)
      } else if (entry.name.toLowerCase().match(/\.(png|jpe?g|gif|webp)$/i)) {
        // Remove 'content' from the path if it exists
        const relPath = relative('./content', srcPath).replace(/^content\//, '')
        const destPath = join(targetPath, relPath)
        
        // Create destination directory if it doesn't exist
        await fs.mkdir(dirname(destPath), { recursive: true })
        
        // Copy the file
        await fs.copyFile(srcPath, destPath)
        console.log(`Copied: ${relPath}`)
      }
    }
  } catch (error) {
    console.error('Error copying files:', error)
  }
}

export default defineNitroPlugin(async () => {
  const contentDir = './content'
  let outputDir = './.output/public'
  
  if (process.env.VERCEL) {
    outputDir = './.vercel/output/static'
  }

  if (await exists(contentDir)) {
    console.log('📁 Starting asset migration...')
    await copyPngFiles(contentDir, outputDir)
    console.log('✨ Asset migration complete')
  }
})

To be able to check in local developments you would need a middleware, I leave more info at my blog:
https://juanman.tech/blog/7

I have tried to use a transformation from Nuxt Content V3, but I was not able to it (I think i mix some types without returning the same object, maybe i coudl try again in the future).

[davestewart]

I have been AWFUL at maintaining this package! My apologies, just struggling to find the time at the moment (but that is improving).

It is right at the top of my todo list, I just need to get my head back in the OSS game.

I note everyone's concerns 👀

[DraftProducts]

@davestewart Thanks for your work on this useful package.
Many users want to migrate to Nuxt Content V3 but are blocked by the incompatibility. JuanmanDev's solution works but requires significant refactoring that could be done once here.
Do you have a rough timeline for V3 compatibility? Or would you accept contributions to help move this forward?
Completely understand the time constraints on open source projects.

[davestewart]

Right, I'm back!

So sorry for being away from this for so long, I just have not had the headspace for any open source for the last year or so.

But yes, let's get this Nuxt 4 thing over the line.

I'm looking at this from... now.

[arkhaiel]

Welcome back sir ! Let us know if you need any help or whatever. Can't wait for using your amazing module in my next Nuxt Content website !

[davestewart]

Hey folks!

Just to let you know that I am actually back into Nuxt Content world after a long hiatus.

I've resolved most of the outstanding non-Nuxt Content 3 issues, and I've just finished migrating my personal site from VuePress 1 (Vue 2 + JS!) to Nuxt 4 and Nuxt Content 2.

I have some other projects I'm running in tandem, but the Nuxt Content 3 migration is at the top of my list. I want the features from Nuxt Content 3 as much as you do!

My track record on promises ain't great, but I'll be really pleased if I can find some time to get this done next week / by the end of Jan 2026.

[davestewart]

I'm just keeping folks updated.

My new personal site has been fully migrated to Nuxt 3 and Nuxt Content 2.

So the news is, my brain is back in Nuxt / Nuxt content, but I haven't yet found the time to work on the V3 migration.

Next stop is job hunt, then between the searching I will look to see what can be done.

I would also like to land this ticket before I start the migration, but apart from that, it's still very much at the front of the queue.