Vue 3 `<script setup>` Name & Attrs Extension

0.1.0 · deprecated · verified Wed Apr 22

vite-plugin-vue-setup-extend-plus is a Vite plugin designed to enhance the Vue 3 `<script setup>` syntactic sugar within Single File Components (SFCs). It specifically introduces support for defining the `name` and `inheritAttrs` attributes directly on the `<script setup>` tag, a capability not natively available in Vue 3's initial `<script setup>` implementation. This allows for easier component introspection and finer control over attribute inheritance for components utilizing the composition API. The package is currently at version 0.1.0 and appears to have had a single release. It builds upon `vite-plugin-vue-setup-extend` but explicitly indicates that "iterative updates are made in unplugin-vue-setup-extend-plus during the later period," suggesting it has been superseded by its `unplugin` counterpart for ongoing development and maintenance. Its primary function is a targeted code transformation during the Vite build process to enable these additional attributes.

Common errors

```
Error: Cannot find module 'vite-plugin-vue-setup-extend-plus'
```
cause The package might not be correctly installed or is missing from `devDependencies`.

fix Run `npm install vite-plugin-vue-setup-extend-plus -D` or `yarn add vite-plugin-vue-setup-extend-plus -D` to install it.
```
TypeError: vueSetupExtend is not a function
```
cause Incorrect import statement; `vite-plugin-vue-setup-extend-plus` is a default export, but it might be imported as a named export.

fix Ensure the import is `import vueSetupExtend from 'vite-plugin-vue-setup-extend-plus'` in your `vite.config.ts`.

Warnings

deprecated This package is explicitly deprecated in its README, which states: "Iterative updates are made in unplugin-vue-setup-extend-plus during the later period." Users should migrate to `unplugin-vue-setup-extend-plus` for continued maintenance and new features.
Fix: Migrate your project to use `unplugin-vue-setup-extend-plus` instead. Uninstall `vite-plugin-vue-setup-extend-plus` and install `unplugin-vue-setup-extend-plus`, then update your `vite.config.ts` accordingly.
gotcha The package has only a single published version (0.1.0) and is no longer actively maintained. This means it will not receive bug fixes, security updates, or support for newer Vue/Vite versions.
Fix: It is strongly recommended to use the actively maintained `unplugin-vue-setup-extend-plus` to ensure compatibility and ongoing support for your Vue 3 projects.

Install

npm install vite-plugin-vue-setup-extend-plus npm
yarn add vite-plugin-vue-setup-extend-plus yarn
pnpm add vite-plugin-vue-setup-extend-plus pnpm

Imports

vueSetupExtend
wrong:
```
const vueSetupExtend = require('vite-plugin-vue-setup-extend-plus')
```
correct:
```
import vueSetupExtend from 'vite-plugin-vue-setup-extend-plus'
```
This plugin is a default export. Ensure you're importing it directly as a default, not a named export. Vite projects are typically ESM-first.
defineConfig
wrong:
```
import defineConfig from 'vite'
```
correct:
```
import { defineConfig } from 'vite'
```
This is a standard named import for Vite configuration files.

vue

wrong:

import { vue } from '@vitejs/plugin-vue'

correct:

import vue from '@vitejs/plugin-vue'

The official Vue plugin for Vite is a default export.

Quickstart

This quickstart demonstrates how to configure `vite-plugin-vue-setup-extend-plus` in your `vite.config.ts` and then apply the `name` and `inheritAttrs` attributes directly to a `<script setup>` block in a Vue SFC.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueSetupExtend from 'vite-plugin-vue-setup-extend-plus'

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

// In your Vue SFC (e.g., src/App.vue):
// <template>
//   <div>hello world {{ message }}</div>
// </template>

// <script lang="ts" setup name="App" inheritAttrs="false">
//   const message = 'from App component'
// </script>

view raw JSON →