		@@ -54,2 +54,36 @@ # @vitejs/plugin-vue [![npm](https://img.shields.io/npm/v/@vitejs/plugin-vue.svg)](https://npmjs.com/package/@vitejs/plugin-vue)

		## Asset URL handling

		When `@vitejs/plugin-vue` compiles the `<template>` blocks in SFCs, it also converts any encountered asset URLs into ESM imports.

		For example, the following template snippet:

		```vue
		<img src="../image.png" />
		```

		Is the same as:

		```vue
		<script setup>
		import _imports_0 from '../image.png'
		</script>

		<img src="_imports_0" />
		```

		By default the following tag/attribute combinations are transformed, and can be configured using the `template.transformAssetUrls` option.

		```js
		{
		video: ['src', 'poster'],
		source: ['src'],
		img: ['src'],
		image: ['xlink:href', 'href'],
		use: ['xlink:href', 'href']
		}
		```

		Note that only attribute values that are static strings are transformed. Otherwise, you'd need to import the asset manually, e.g. `import imgUrl from '../image.png'`.

		## Example for passing options to `vue/compiler-sfc`:
		@@ -68,10 +102,3 @@
		transformAssetUrls: {
		// default tags
		tags: {
		video: ['src', 'poster'],
		source: ['src'],
		img: ['src'],
		image: ['xlink:href', 'href'],
		use: ['xlink:href', 'href']
		}
		// ...
		}
		@@ -78,0 +105,0 @@ }

dist/index.cjs

Sorry, the diff of this file is not supported yet

dist/index.mjs

Sorry, the diff of this file is not supported yet

@vitejs/plugin-vue - npm Package Compare versions

New alerts