[!WARNING] You don't need this plugin if you are using Vue 3.3+

Use defineOptions instead.

Install

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

Usage

In vite.config.ts import the plugin and add plugins array:

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()],
})

In vue template add inherit-attrs="false":

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

Config

No config needed :)

Change Log

1.0.4

• Moved to full ESM

Other projects

Vue Icons

60,000+ SVG icons from popular icon sets that you can add seamlessly to your vue projects

Vue Popper

A tooltip component for Vue 3 based on popper.js

KalimahApps Eslint Config

Comprehensive eslint rules for vue projects with typescript

License

MIT License