• Overview
• Installation
• Configuration
• Best Practices
• Additional Resources

Overview

Plug-and-play image optimization for Nuxt apps. Resize and transform your images in your code using your imgix images.

Installation

Add @nuxt/image devDependency to your Nuxt.js project:

npm install -D @nuxt/image

Add the module to buildModules in your nuxt.config:

export default {
  target: 'static',
  buildModules: [
    '@nuxt/image',
  ]
}

You can now start using <nuxt-img> and <nuxt-picture> components in your Nuxt app!

Configuration

Add an image section in your nuxt.config.js, add imgix as a provider and add your Source's imgix Domain as a baseUrl :

export default {
  image: {
    imgix: {
      baseURL: 'https://assets.imgix.net'
    }
  }
}

Best Practices

Some common best practices when using imgix with Nuxt Image, would be to include the auto parameter, which will automatically apply the best format for an image and compress the image as well. Combine this with some top of intelligent cropping and resizing and you will have a great image!

<nuxt-img
  provider="imgix"
  src="/blog/woman-hat.jpg"
  width="300"
  height="500"
  fit="cover"
  :modifiers="{ auto: 'format,compress', crop: 'faces' }"
/>

This will return a 300 x 500 image, which has been compressed, will display next-gen formats for a browser, and has been cropped intelligently to the face of the woman in the hat.

Additional Resources

• Nuxt Image Documentation
• Tutorial Blog
• Demo Site