unplugin-vue-image
Install
npm i unplugin-vue-image -D
Vite
// vite.config.ts
import Image from 'unplugin-vue-image/vite'
export default defineConfig({
plugins: [
Image({ /* options */ }),
],
})
Example: playground/
Rollup
// rollup.config.js
import Image from 'unplugin-vue-image/rollup'
export default {
plugins: [
Image({ /* options */ }),
],
}
Webpack
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require('unplugin-vue-image/webpack')({ /* options */ }),
],
}
Nuxt
// nuxt.config.js
export default {
buildModules: [
['unplugin-vue-image/nuxt', { /* options */ }],
],
}
This module works for both Nuxt 2 and Nuxt Vite
Vue CLI
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require('unplugin-vue-image/webpack')({ /* options */ }),
],
},
}
Usage
unplugin-vue-image
auto import your image from assets/images
by default to your Vue component.
You can only use image variables using camelCase.
--- aseets
--- images
--- logo.png
--- App.vue
--- src/App.vue ---
<template>
<div>
<img :src="Logo">
</div>
</template>
Credits
This plugin was inspired by vite-plugin-vue-images, it's an enhanced version of it.