vite-plugin-vue-webp v0.0.7

Usage

Only works with Vite 2 & Vue 3.

Install

npm i vite-plugin-vue-webp -D

Add to vite.config.js

// vite.config.js
import Vue from '@vitejs/plugin-vue'
import ViteWebp from 'vite-plugin-vue-webp'

export default {
  plugins: [
    Vue(),
    ViteWebp({
      dirs: ['src/images'],
      extensions: ['jpg', 'jpeg', 'png', 'svg'],
      customResolvers: [],
      customSearchRegex: '([A-Z][a-zA-Z0-9]+)',
    })
  ],
};

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 TestImage1Origin from '/src/assets/img/test_image1.jpg'
import TestImage1Webp from '/src/assets/img/test_image1.webp'
const TestImage1 = window.canUseWebp ? TestImage1Webp : TestImage1Origin
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'],

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

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

Example

See the example directory.

Thanks

Thanks to @sampullman . This project is inspired by vite-plugin-vue-images.

License

MIT License © 2021 meisiwan