Plug-in name: vite-plugin-vue-setup-extend
1. Installation
npm i vite-plugin-vue-setup-extend -D
2. Configuration ( vite.config.ts )
import {
defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
export default defineConfig({
plugins: [
vue(),
VueSetupExtend(),
]
})
or another way of writing
import {
defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
export default ({ mode }: any) => {
return defineConfig({
plugins: [vue(), VueSetupExtend()],
})
}
3. Use
<script lang="ts" setup name="test">
// test
</script>
Problem:
When using vite-plugin-vue-setup-extend 0.4.0 and previous versions, there will be a problem: if there is no content in the script tag, even if the name attribute is added to the script tag, it will not be displayed in vue-devtools will take effect.
Solution: Do not leave the script tag empty, for example: add line comments.