Extending the vue script setup syntactic sugar
npm install unplugin-vue-setup-extend-plus
Make the vue script setup syntax support the name attribute
[1.0.1]
- Fix: auto expose type
[1.0.0]
- Feat: support auto expose(by @so11y)
- 🌟support auto expose
- support name
- support inheritAttrs
- precise breakpoints
- Expanded the function of automatic name generation
``html
hello world {{ a }}
`Install
`bash`
npm i unplugin-vue-setup-extend-plus
`ts`
vueSetupExtend({
// Advanced mode for name, not necessary
mode?: 'none' | 'relativeName' | Function
// none: Cancel the setting of name.
// e.g.
//
App.vuevue
`Script Tag Attributes
Set a name for the component, similar to the name attribute in the option API notation.
`html
hello world {{ a }}
`
If you do not want a component to automatically inherit attributes, you can set inheritAttrs: false in the component's options.
`html
hello world {{ a }}
`
Since the user may define the name attribute of the component in the script tag, this conflicts with the default name set by this plugin. So you need to add a switch attribute to the script setup.
`html
hello world {{ a }}
// name="App" will be invalid
`
Vite
`ts
// vite.config.ts
import vueSetupExtend from 'unplugin-vue-setup-extend-plus/vite'
export default defineConfig({
plugins: [
vueSetupExtend({ / options / }),
],
})
`
Rollup
`ts
// rollup.config.js
import vueSetupExtend from 'unplugin-vue-setup-extend-plus/rollup'
export default {
plugins: [
vueSetupExtend({ / options / }),
],
}
`
Webpack
`ts`
// webpack.config.js
module.exports = {
/ ... /
plugins: [
require('unplugin-vue-setup-extend-plus/webpack').default({ / options / })
// or
// require('unplugin-vue-setup-extend-plus/webpack')({ / options / })
]
}
Nuxt
`ts`
// nuxt.config.js
export default {
buildModules: [
['unplugin-vue-setup-extend-plus/nuxt', { / options / }],
],
}
> This module works for both Nuxt 2 and Nuxt Vite
Vue CLI
`ts``
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require('unplugin-vue-setup-extend-plus/webpack')({ / options / }),
],
},
}
MIT