Skip to content

Commit

Permalink
docs(plugin-vue): clarify asset url handling (#8184)
Browse files Browse the repository at this point in the history
  • Loading branch information
bluwy authored May 15, 2022
1 parent 3eb6f31 commit 32c75e2
Showing 1 changed file with 35 additions and 8 deletions.
43 changes: 35 additions & 8 deletions packages/plugin-vue/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,40 @@ export interface Options {
}
```

## 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`:

```ts
Expand All @@ -64,14 +98,7 @@ export default {
// ...
},
transformAssetUrls: {
// default tags
tags: {
video: ['src', 'poster'],
source: ['src'],
img: ['src'],
image: ['xlink:href', 'href'],
use: ['xlink:href', 'href']
}
// ...
}
}
})
Expand Down

0 comments on commit 32c75e2

Please sign in to comment.