Nuxt•2mo ago

Nuxt Content file modyfication date

How to get "lastModyfication" date in nuxt content using transformer or queryCollection and not using server rendering

8 Replies

Hi @DJ Kondzio. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To get the "last modification" date (i.e., the last time a content file was modified) in Nuxt Content, you can use a custom transformer to add this information to your content files. Here’s how you can do it: 1. Create a Transformer Define a transformer that reads the file's modification date and adds it as a field (e.g., lastModified) to the content object. Example:

// ~/transformers/last-modified.ts
import { defineTransformer } from '@nuxt/content'

export default defineTransformer({
  name: 'last-modified',
  extensions: ['.md'],
  async transform(file) {
    // file._id is the absolute path to the file
    const { mtime } = await import('fs/promises').then(fs => fs.stat(file._id))
    return {
      ...file,
      lastModified: mtime.toISOString(),
    }
  },
})

// ~/transformers/last-modified.ts
import { defineTransformer } from '@nuxt/content'

export default defineTransformer({
  name: 'last-modified',
  extensions: ['.md'],
  async transform(file) {
    // file._id is the absolute path to the file
    const { mtime } = await import('fs/promises').then(fs => fs.stat(file._id))
    return {
      ...file,
      lastModified: mtime.toISOString(),
    }
  },
})

Note: The knowledge sources do not explicitly show this exact code, but they do explain how to use transformers to add or modify fields in your content files, such as appending to the title or adding metadata fields. You can adapt this pattern to add the modification date using Node.js file system APIs in your transformer. See the Transformers documentation for more details.

2. Register the Transformer In your nuxt.config.ts:

export default defineNuxtConfig({
  content: {
    build: {
      transformers: [
        '~/transformers/last-modified',
      ],
    },
  },
})

export default defineNuxtConfig({
  content: {
    build: {
      transformers: [
        '~/transformers/last-modified',
      ],
    },
  },
})

Transformers documentation 3. Add the Field to Your Schema Update your collection schema in content.config.ts to include the new field:

import { defineContentConfig, defineCollection, z } from '@nuxt/content'
export default defineContentConfig({
  collections: {
    docs: defineCollection({
      type: 'page',
      source: 'docs/**/*.md',
      schema: z.object({
        lastModified: z.string().optional(),
        // ...other fields
      })
    })
  }
})

import { defineContentConfig, defineCollection, z } from '@nuxt/content'
export default defineContentConfig({
  collections: {
    docs: defineCollection({
      type: 'page',
      source: 'docs/**/*.md',
      schema: z.object({
        lastModified: z.string().optional(),
        // ...other fields
      })
    })
  }
})

Schema Validators 4. Query the Field Now you can use queryCollection to select and display the lastModified field in your components:

<script setup lang="ts">
const { data: docs } = await useAsyncData('documents-list', () => {
  return queryCollection('docs')
    .select('title', 'path', 'lastModified')
    .all()
})
</script>

<script setup lang="ts">
const { data: docs } = await useAsyncData('documents-list', () => {
  return queryCollection('docs')
    .select('title', 'path', 'lastModified')
    .all()
})
</script>

queryCollection usage --- Summary:
- Use a custom transformer to add the file modification date as a field. - Register the transformer and update your schema. - Query the new field in your components. If you want to avoid server-side code entirely, note that file modification dates are not available in the browser, so this must be done at build time using a transformer. This approach works with static and client-side rendering, as the data is embedded in the generated content. If you need more details on transformers, see the official documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@217727541321007104> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

DJ KondzioOP•2mo ago

@kapa.ai I don't want define in md file lastModification variable. I want get from file e.q file._file?._stat?.mtime

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The knowledge sources confirm that you can use a custom transformer in Nuxt Content to add or modify fields in your content files, such as appending metadata. However, the documentation does not explicitly state that file system metadata like mtime (modification time) is directly available on the file object passed to the transformer, nor does it document a property like file._file?._stat?.mtime or similar. The official documentation shows that transformers receive a file object representing the parsed content, and you can add custom fields to it. For example, you can add computed fields or enrich content with additional data, but it does not specify that file system stats are included by default in the file object within the transformer context. Here’s the relevant pattern:

import { defineTransformer } from '@nuxt/content'

export default defineTransformer({
  name: 'title-suffix',
  extensions: ['.md'],
  transform(file) {
    return {
      ...file,
      title: file.title + ' (suffix)',
    }
  },
})

import { defineTransformer } from '@nuxt/content'

export default defineTransformer({
  name: 'title-suffix',
  extensions: ['.md'],
  transform(file) {
    return {
      ...file,
      title: file.title + ' (suffix)',
    }
  },
})

Transformers documentation If you want to add the last modification date automatically (without defining it in the markdown frontmatter), you would need to access the file system's metadata in your transformer. The documentation does not provide an example or confirm that this is possible out-of-the-box, nor does it mention a file._file?._stat?.mtime property. Summary:
- You can use transformers to add custom fields to your content. - The knowledge sources do not confirm that file modification time (mtime) is available on the file object in a transformer. - There is no documented property like file._file?._stat?.mtime in the official docs. If you need this feature, you may need to experiment or consult the Nuxt Content source code, as the documentation does not provide enough information to confirm this approach. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@217727541321007104> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

DJ KondzioOP•2mo ago

@kapa.ai this is correct?

import { defineTransformer } from '@nuxt/content';
import { promises as fs } from 'node:fs';
import { resolve } from 'node:path';

export default defineTransformer({
  name: 'lastModified',
  extensions: ['.md'],
  async transform(file) {
    try {
      const filePath = resolve(process.cwd(), file.path.replace(/^\/+/, '') + '.md');
      const stats = await fs.stat(filePath);
      return {
        ...file,
        lastModified: stats.mtime,
      };
    } catch (err) {
      return file;
    }
  },
});

import { defineTransformer } from '@nuxt/content';
import { promises as fs } from 'node:fs';
import { resolve } from 'node:path';

export default defineTransformer({
  name: 'lastModified',
  extensions: ['.md'],
  async transform(file) {
    try {
      const filePath = resolve(process.cwd(), file.path.replace(/^\/+/, '') + '.md');
      const stats = await fs.stat(filePath);
      return {
        ...file,
        lastModified: stats.mtime,
      };
    } catch (err) {
      return file;
    }
  },
});

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, your approach aligns with the documented pattern for defining a custom transformer in Nuxt Content, where you can add or modify fields on the content object during the build process. The documentation shows that you can use the defineTransformer helper and modify the file object, as in this example:

import { defineTransformer } from '@nuxt/content'

export default defineTransformer({
  name: 'title-suffix',
  extensions: ['.md'],
  transform(file) {
    return {
      ...file,
      title: file.title + ' (suffix)',
    }
  },
})

import { defineTransformer } from '@nuxt/content'

export default defineTransformer({
  name: 'title-suffix',
  extensions: ['.md'],
  transform(file) {
    return {
      ...file,
      title: file.title + ' (suffix)',
    }
  },
})

Transformers documentation However, the knowledge sources do not explicitly confirm that accessing the file system using fs.stat within a transformer is officially supported or that file.path will always resolve correctly to the file's location on disk. The documentation does not provide an example of using Node.js APIs inside a transformer, nor does it specify the structure of the file object regarding its path on disk. Summary:
- Your code follows the correct transformer pattern. - The use of fs.stat and resolving the file path is not documented in the official sources, so its reliability cannot be guaranteed based on the provided documentation. - There is no confirmation in the knowledge sources that file.path will always map to the actual file system path as you expect. If you proceed with this approach, be aware that you may need to adjust the file path logic depending on how Nuxt Content structures the file object internally, and this is not covered in the official documentation. In short:
Your code is consistent with the transformer usage pattern, but the knowledge sources do not provide enough information to confirm that accessing the file system in this way is officially supported or will always work as expected. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@217727541321007104> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Nuxt Content file modyfication date

Did you find this page helpful?