Nuxt's New Built-in Modules for Faster Development

Nuxt has traditionally bundled performance best practices and application setup conventions into its developer experience. Recent releases extend that philosophy by removing repetitive configuration work, letting developers spend less time wiring up tooling and more time building features. Three newer additions—@nuxt/content, @nuxt/components, and @nuxt/image—each target a common source of boilerplate or manual tuning.

Git-Based CMS With Nuxt Content

For sites that don't need the full weight of an external headless CMS—like a smaller blog—Nuxt Content provides a git-based alternative. Content is written as markdown, CSV, YAML, or XML files directly in your project, with default configuration available out of the box and custom settings added as simple properties.

The key workflow benefit: static markdown files in a directory can serve as your entire blog. The module reuses Nuxt's dynamic pages API to generate routes from those files, so there's no new paradigm to learn. It also includes full-text search without the need to integrate a third-party service, a feature that would otherwise add meaningful setup time to a small site.

Automatic Component Imports and Registration

Manually importing components in every layout, page, or component file is a recurring interruption. The Nuxt Components module automates this process by scanning the components directory and handling import and registration automatically—meaning components can be used in layouts, pages, and other components without explicit import statements.

The setup is minimal, requiring only the module in your nuxt.config.js:

export default {
  components: true
}

A side benefit: components used repeatedly are automatically bundled into a shared chunk for better caching. On very large projects, however, the automatic scanning can impact build times, so it's worth monitoring if you scale up significantly.

Responsive and Optimized Images With Nuxt Image

Image optimization usually means either manual responsive markup or an external service integration. Nuxt Image abstracts both: it offers a built-in optimizer or ready-made integrations with over a dozen popular providers (Cloudinary, Fastly, and others). The module outputs standard <img> and <picture> tags, so there's no proprietary rendering to work around downstream.

Configuration is added via an images property in nuxt.config.js, where you can designate breakpoints as well as provider-specific settings:

export default {
  image: {
    // The screen sizes predefined by `@nuxt/image`:
    screens: {
      xs: 320,
      sm: 640,
      md: 768,
      lg: 1024,
      xl: 1280,
      xxl: 1536,
      '2xl': 1536
    },
    // Generate images to `/_nuxt/image/file.png`
     staticFilename: '[publicPath]/images/[name]-[hash][ext]',
     domains: [
        'images.unsplash.com'
    ],
    alias: {
      unsplash: 'https://images.unsplash.com'
    }
  }
}

Usage then resembles any other Vue component:

<nuxt-img src="https://css-tricks.com/nuxt-icon.png" />

or:

<nuxt-picture src="https://css-tricks.com/nuxt-icon.png" />

The module also exposes a $img API for background images, demonstrated in the sample project below (though this particular API is not yet fully documented).

Explore the Features in Practice

A sample recipe blog demonstrates all three modules working together: Nuxt Content powers the recipe entries, Nuxt Components removes the need for manual imports, and Nuxt Image handles image transformations. The project is available to explore or fork on GitHub, with a live site you can view in action.