https://github.com/chenxch/unplugin-vue-setup-extend-plus
Extending the vue script setup syntactic sugar
https://github.com/chenxch/unplugin-vue-setup-extend-plus
Last synced: 30 days ago
JSON representation
Extending the vue script setup syntactic sugar
- Host: GitHub
- URL: https://github.com/chenxch/unplugin-vue-setup-extend-plus
- Owner: chenxch
- License: mit
- Created: 2022-06-06T17:20:15.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-02-08T11:50:39.000Z (about 1 year ago)
- Last Synced: 2025-02-27T17:18:02.377Z (about 2 months ago)
- Language: TypeScript
- Size: 180 KB
- Stars: 39
- Watchers: 1
- Forks: 5
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome - unplugin-vue-setup-extend-plus
README
# unplugin-vue-setup-extend-plus
[](https://www.npmjs.com/package/unplugin-vue-setup-extend-plus)
Make the vue script setup syntax support the name attribute
## CHANGELOG
[1.0.1]
- Fix: auto expose type
[1.0.0]
- Feat: support auto expose(by [@so11y](https://github.com/so11y))
## Feature
- 🌟support auto expose
- support name
- support inheritAttrs
- precise breakpoints
- Expanded the function of automatic name generation
## Usage
### Basic example
```html
hello world {{ a }}
const a = 1
```
## Install
```bash
npm i unplugin-vue-setup-extend-plus
```
## Options
```ts
vueSetupExtend({
// Advanced mode for name, not necessary
mode?: 'none' | 'relativeName' | Function
// none: Cancel the setting of name.
// e.g.
// 'CustomName'
// support auto expose
enableAutoExpose?: boolean
})
```
## enableAutoExpose
First of all thanks to [@so11y](https://github.com/so11y) for his contribution to this feature.
After using the script setup syntax, the export needs to be processed manually. When you need to export the full amount by default, just enable this property. The usage is as follows:
main.ts
```ts
import { createApp } from 'vue'
import autoExpose from 'unplugin-vue-setup-extend-plus/dist/client/index'
import App from './App.vue'
createApp(App).use(autoExpose).mount('#app')
```
Comp.vue
```vue
<script setup>
import { ref } from 'vue'
const numb = ref(50)
```
App.vue
```vue
import { onMounted, ref } from 'vue'
const el = ref()
onMounted(() => { console.log(el.value.num) }) // 50
```
## Script Tag Attributes
### name
`Set a name for the component, similar to the name attribute in the option API notation.`
[name docs](https://vuejs.org/api/options-misc.html#name)
```html
hello world {{ a }}
const a = 1
```
### inheritAttrs
`If you do not want a component to automatically inherit attributes, you can set inheritAttrs: false in the component's options.`
[inheritAttrs docs](https://vuejs.org/api/options-misc.html#inheritattrs)
```html
hello world {{ a }}
const a = 1
```
### extendIgnore
`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
const a = 1
```
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](https://github.com/nuxt/vite)
Vue CLI
```ts
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require('unplugin-vue-setup-extend-plus/webpack')({ /* options */ }),
],
},
}
```
## Expansion based on [vite-plugin-vue-setup-extend](https://github.com/vbenjs/vite-plugin-vue-setup-extend)
## License
MIT