unplugin-vue-setup-attributes

Extend vue script setup syntax,make it support the name and inheritAttrs attribute.

Features

✨ Extend vue script setup syntax,make it support the name and inheritAttrs attribute.
💚 Supports both Vue 2.7 and Vue 3 out-of-the-box.
⚡️ Supports Vite, Webpack, Vue CLI, Rollup, esbuild and more, powered by unplugin.

Installation

npm

npm i unplugin-vue-setup-attributes -D

Usage

Config

Config plugin in build tool configuration file,such as vite.config.ts,vue.config.js and webpack.config.js

Vite

// vite.config.ts
import { Plugin, defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueSetupAttributes from 'unplugin-vue-setup-attributes'

export default defineConfig({
  plugins: [vue(), vueSetupAttributes()],
})

Webpack

// vue.config.js

module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-vue-setup-attributes')()
    ]
  },
}

// webpack.config.js

module.exports = {
  plugins: [
    require('unplugin-vue-setup-attributes')()
  ]
}

SFC

<script setup lang="ts" name="Home" inheritAttrs="false">
  import { ref } from 'vue'
  const foo = ref("foo")
</script>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Home',
  inheritAttrs: false,
})
</script>

<script setup lang="ts">
  import { ref } from 'vue'
  const foo = ref("foo")
</script>