unplugin-vue-setup-extend-plus

Make the vue script setup syntax support the name attribute

CHANGELOG

[1.0.0]

• Feat: support auto expose(by @so11y)

[0.4.9]

• Fix: webpack transformInclude reg

Feature

• 🌟support auto expose
• support name
• support inheritAttrs
• precise breakpoints
• Expanded the function of automatic name generation

Usage

Basic example

<template>
  <div>hello world {{ a }}</div>
</template>

<script lang="ts" setup name="App" inheritAttrs="false">
  const a = 1
</script>

Install

npm i unplugin-vue-setup-extend-plus

Options

vueSetupExtend({
  // Advanced mode for name, not necessary
  mode?: 'none' | 'relativeName' | Function
  // none: Cancel the setting of name.
  //       e.g.
  //       <script setup name="CustomName"> 'CustomName' 
  // support auto expose
  enableAutoExpose?: boolean
})

enableAutoExpose

First of all thanks to @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

import { createApp } from 'vue'
import autoExpose from 'unplugin-vue-setup-extend-plus/src/client/index'
import App from './App.vue'

createApp(App).use(autoExpose).mount('#app')

Comp.vue

<script setup>
import { ref } from 'vue'
const numb = ref(50)
</script>

App.vue

<script setup>
import { onMounted, ref } from 'vue'
const el = ref()
onMounted(() => { console.log(el.value.num) }) // 50
</script>

<template>
  <Comp ref="el" />
</template>

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.

<template>
  <div>hello world {{ a }}</div>
</template>

// name="App" will be invalid
<script lang="ts" setup name="App" inheritAttrs="false" extendIgnore>
  const a = 1
</script>

// vite.config.ts
import vueSetupExtend from 'unplugin-vue-setup-extend-plus/vite'

export default defineConfig({
  plugins: [
    vueSetupExtend({ /* options */ }),
  ],
})

// rollup.config.js
import vueSetupExtend from 'unplugin-vue-setup-extend-plus/rollup'

export default {
  plugins: [
    vueSetupExtend({ /* options */ }),
  ],
}

// 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.config.js
export default {
  buildModules: [
    ['unplugin-vue-setup-extend-plus/nuxt', { /* options */ }],
  ],
}

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-vue-setup-extend-plus/webpack')({ /* options */ }),
    ],
  },
}

Expansion based on vite-plugin-vue-setup-extend

License

MIT