vite-plugin-vue-images

Auto import images for Vite+Vue projects

Warning

This project is not currently maintained, but PRs are welcome. The version of Vite used is 2, and there are open issues which may affect usage.

Usage

Only works with Vite 2 & Vue 3.

Install

npm i vite-plugin-vue-images -D

Add to vite.config.js

// vite.config.js
import Vue from '@vitejs/plugin-vue'
import ViteImages from 'vite-plugin-vue-images'

export default {
  plugins: [
    Vue(),
    ViteImages()
  ],
};

Use images in templates without import-ing and exposing via data. Image names are converted to PascalCase. Duplicate image names are not supported at this time. Currently, v-bind:src or the shorthand :src must be used.

Images in subdirectories are referenced by prepending the directory structure, e.g. src/assets/img/icon/star.png becomes IconStar. This behavior may change in the future, or become configurable.

WARNING: Variables (props, data) will be clobbered in templates if they conflict with image names

The plugin will convert this:

<template>
<img :src="Image1" />
</template>

<script>
export default {
  name: 'app',
};
</script>

into this:

<template>
<img :src="TestImage1" />
</template>

<script>
import TestImage1 from '/src/assets/img/test_image1.jpg'

export default {
  name: 'App',
  data() {
    return {
      TestImage1,
    };
  },
};
</script>

Configuration

Default configuration values:

ViteImages({
  // Relative paths of image search directories
  dirs: ['src/assets/img'],

  // valid image extensions
  extensions: ['jpg', 'jpeg', 'png', 'svg', 'webp'],

  // Override default behavior of name -> image path resolution
  customResolvers: [],

  // Override Regex that searches for variables to replace. MUST include group
  customSearchRegex: '([a-zA-Z0-9]+)',
});

Example

See the example directory.

Thanks

Thanks to @antfu and @brattonross. This project is inspired by vite-plugin-components, which is in turn inspired by vite-plugin-voie.

License

MIT License © 2021 Samuel Pullman