Libraries
Nuxt Image
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
More Plugins
- ContentfulbuildBrowse, search, and add assets into your content quickly and easily via the imgix Asset Manager.TypeScript 9 4 days ago
- Craft Image OptimizeAutomatically create & optimize responsive image transforms, using either native Craft transforms or a service like imgix, with zero template changes.PHP 234 20 days ago
- FigmaBrowse, search, and insert image assets into your Figma designs quickly and easily via the imgix Asset Manager.Invalid date
- Imager X for CraftAn image manipulation plugin for the Craft CMS that supports imgix URLsPHP 23 a month ago
- Salesforce Commerce CloudUse this integration to insert images from imgix's Image Manager into your Salesforce Commerce Cloud websites.JavaScript 1 8 months ago
- MagentoBrowse, search, and insert image assets into your storefront quickly and easily via the imgix Image Manager.JavaScript 22 7 months ago
- Statamic PluginAn add-on for integrating imgix into Statamic sitesPHP 17 2 years ago
- Superbig Craft PluginA plugin for the Craft CMS that adds full access to the imgix API for manipulating imagesPHP 13 7 months ago
- wp-imgixA WordPress plugin that connects to your storage (Amazon S3, Google Cloud, & others) and provides imgix URLs for your site's imagesPHP 9 4 months ago