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 10 3 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 232 10 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 22 days ago
- Salesforce Commerce CloudUse this integration to insert images from imgix's Image Manager into your Salesforce Commerce Cloud websites.JavaScript 1 a year ago
- MagentoBrowse, search, and insert image assets into your storefront quickly and easily via the imgix Image Manager.JavaScript 22 a year ago
- Superbig Craft PluginA plugin for the Craft CMS that adds full access to the imgix API for manipulating imagesPHP 13 a year ago
- wp-imgixA WordPress plugin that connects to your storage (Amazon S3, Google Cloud, & others) and provides imgix URLs for your site's imagesPHP 12 10 months ago