Package Exports

unplugin-vue-setup-extend-plus
unplugin-vue-setup-extend-plus/esbuild
unplugin-vue-setup-extend-plus/rollup
unplugin-vue-setup-extend-plus/types
unplugin-vue-setup-extend-plus/vite
unplugin-vue-setup-extend-plus/webpack

Readme

unplugin-vue-setup-extend-plus

Make the vue script setup syntax support the name attribute

CHANGELOG

[0.4.7]

Fix: webpack conversion script parsing lost

[0.4.6]

Fix: webpack parsing failed resulting in process termination#12

[0.4.5]

Fix: commonjs

[0.4.4]

Fix: types

[0.4.1]

Feature: suppot vite@4

Feature

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' will be ignored
  // relativeName: Automatically read relative path names
  //       e.g.
  //       /user/demo/src/user/login.vue  => UserLogin
  // Function: support a custom function
  // (fileId: string) => {
  //    let name = ''
  //    ...
  //    return name
  // }
  //  fileId e.g. /user/demo/src/user/login.vue
})

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

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

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

Rollup

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

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

Webpack

// 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

// 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

// 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