When using vue3 composition API you can utilize setup in script tag to write less boilerplate code which makes it easy to maintain in future.

All top-level bindings can be used directly used in the template tag. See this example:

<script setup>
// variable
const msg = 'Hello!'

// functions
function log() {
  console.log(msg)
}
</script>

<template>
  <div @click="log">{{ msg }}</div>
</template>

While this is great in making code more readable it comes with downfalls. Most notable inability to disable attribute inheritance inside script tag with setup attribute.

So in order to disable attribute inheritance using setup you need to add two script tags.

<script>
// use normal <script> to declare options
export default {
  inheritAttrs: false
}
</script>

<script setup>
// ...setup logic
</script>

This works fine but it defies the purpose of writing less boilerplate code.

Using vite, the amazing build tool, I developed a plugin that will enable you to omit the extra <script> declaration.

The new syntax will be like

<script setup inherit-attrs="false">
// ...setup logic
</script>

And that's it. The plugin will add the second <script> tag automatically with inheritAttrs: false.

You can find the plugin, installation and configuration steps here:

npm install vite-plugin-vue-setup-inherit-attrs -D

import { defineConfig, Plugin } from 'vite'
import vue from '@vitejs/plugin-vue'
import inheritAttrs from 'vite-plugin-vue-setup-inherit-attrs';

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

<template>
  <div class="root-element">
      <div class="nested-element" v-bind="$attrs">
          $attrs will be added to this element instead of the root element
      </div>
  </div>
</template>

<script lang="ts" setup inherit-attrs="false">
  // code here
</script>