Registry / web-framework / unplugin-vue-setup-extend-plus

unplugin-vue-setup-extend-plus

library1.0.1jsnpmunverified

unplugin-vue-setup-extend-plus is an unplugin that augments Vue 3's `<script setup>` syntax, enabling the use of attributes like `name` and `inheritAttrs` directly on the script tag. It also provides an "auto expose" feature to automatically export variables from `<script setup>` for template or component ref access, streamlining component development by reducing boilerplate for exposing reactive state. The current stable version is 1.0.1, indicating a mature feature set. The project shows a consistent, albeit somewhat sporadic, release cadence with frequent patch fixes and minor feature additions, demonstrating active maintenance. Its key differentiator is providing these extensions universally across various build tools (Vite, Webpack, Rollup, Nuxt) through the unplugin architecture, offering a unified developer experience regardless of the underlying bundler.

web-framework

npm install unplugin-vue-setup-extend-plus

github ↗package ↗

INSTALL

IMPORT

SIG · UNPLUGIN-VUE-SETUP

unplugin-vue-setup-extend-plus

web-frameworkjavascriptv1.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

vueSetupExtend

✓ import vueSetupExtend from 'unplugin-vue-setup-extend-plus/vite';

✗ const vueSetupExtend = require('unplugin-vue-setup-extend-plus/vite');

For Vite projects, import the plugin specifically from the '/vite' entry point. Primarily used with ESM.

vueSetupExtend

✓ import vueSetupExtend from 'unplugin-vue-setup-extend-plus/rollup';

✗ const vueSetupExtend = require('unplugin-vue-setup-extend-plus/rollup');

For Rollup projects, import the plugin specifically from the '/rollup' entry point. Primarily used with ESM.

default

✓ require('unplugin-vue-setup-extend-plus/webpack').default

✗ import vueSetupExtend from 'unplugin-vue-setup-extend-plus/webpack';

For Webpack, the plugin is typically consumed via CommonJS `require`. The default export is accessed directly or via `.default`.

autoExpose

✓ import autoExpose from 'unplugin-vue-setup-extend-plus/dist/client/index';

✗ import { autoExpose } from 'unplugin-vue-setup-extend-plus';

The auto expose client plugin for Vue applications must be imported from its specific client-side path.

Demonstrates how to configure the plugin in a Vite project, apply script setup attributes like `name` and `inheritAttrs`, and utilize the `enableAutoExpose` feature with its client-side plugin for automatic variable exposure.

import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import vueSetupExtend from 'unplugin-vue-setup-extend-plus/vite'; export default defineConfig({ plugins: [ vue(), vueSetupExtend({ enableAutoExpose: true, // Enable auto expose feature // mode: 'relativeName' // Optional: Configure name generation mode }), ], }); // src/App.vue <template> <div>Hello from {{ componentName }}!</div> <ChildComponent ref="childRef" /> </template> <script lang="ts" setup name="App" inheritAttrs="false"> import { ref, onMounted } from 'vue'; import ChildComponent from './ChildComponent.vue'; const componentName = ref('App'); const childRef = ref(); onMounted(() => { console.log('Child num:', childRef.value.numb); }); </script> // src/ChildComponent.vue <template> <div>Child Component</div> </template> <script lang="ts" setup> import { ref } from 'vue'; const numb = ref(50); const message = ref('From Child'); // numb and message are automatically exposed due to enableAutoExpose </script> // src/main.ts (to enable autoExpose client plugin for global usage) import { createApp } from 'vue'; import autoExpose from 'unplugin-vue-setup-extend-plus/dist/client/index'; import App from './App.vue'; createApp(App).use(autoExpose).mount('#app');

Debug

Known issues

gotchaWhen using `enableAutoExpose`, ensure the client-side plugin `unplugin-vue-setup-extend-plus/dist/client/index` is explicitly used with `app.use()` in your main Vue application entry file, otherwise, the auto-exposure functionality will not work at runtime.

fix

Add `import autoExpose from 'unplugin-vue-setup-extend-plus/dist/client/index'; createApp(App).use(autoExpose).mount('#app');` to your `main.ts` or equivalent.

affects: >=1.0.0

gotchaIf you define a `name` attribute directly on `<script setup>` and also have the plugin's automatic name generation enabled (which is the default unless `mode: 'none'` is set or `extendIgnore` is used), a conflict might occur. The plugin's default behavior might override your explicit `name` attribute.

fix

To explicitly use your custom `name` attribute and bypass the plugin's automatic generation for a specific component, add the `extendIgnore` attribute to your `<script setup>` tag: `<script setup name="MyComponent" extendIgnore>`.

affects: >=0.4.0

gotchaThe import paths for the plugin vary significantly depending on the build tool being used (Vite, Rollup, Webpack, Nuxt). Using the incorrect path will lead to module resolution errors or the plugin failing to load.

fix

Always import from the specific entry point for your bundler, e.g., `unplugin-vue-setup-extend-plus/vite` for Vite, `unplugin-vue-setup-extend-plus/rollup` for Rollup, and `unplugin-vue-setup-extend-plus/webpack` for Webpack.

affects: >=0.4.0

Errors

Common errors & fixes

Error: [plugin:unplugin-vue-setup-extend-plus] This plugin is not supported in the current environment.

Attempting to import the wrong bundler-specific entry point (e.g., '/vite' in a Webpack project) or missing `require()` for CommonJS contexts.

fix

Ensure you are using the correct import path for your build tool, such as `import vueSetupExtend from 'unplugin-vue-setup-extend-plus/vite';` for Vite or `require('unplugin-vue-setup-extend-plus/webpack').default` for Webpack.

TypeError: Cannot read properties of undefined (reading 'num')

The `autoExpose` feature is enabled in the plugin configuration but the client-side plugin (`unplugin-vue-setup-extend-plus/dist/client/index`) was not globally registered with `app.use()` in the Vue application's entry point.

fix

In your `main.ts` (or equivalent), add `import autoExpose from 'unplugin-vue-setup-extend-plus/dist/client/index'; createApp(App).use(autoExpose).mount('#app');`.

Property 'name' does not exist on type 'VueScriptSetupComponent'.

TypeScript error indicating that the Vue component type definition does not recognize the `name` attribute on `<script setup>`. This typically happens if your editor's TypeScript service is not picking up the augmented types provided by the plugin.

fix

Ensure your `tsconfig.json` includes the plugin's type declarations or a global `d.ts` file. Sometimes restarting the TypeScript language server or IDE can resolve it. The plugin ships with types, so usually this is a configuration or caching issue.

Upgrade

Version history

1.0.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/chenxch/unplugin-vue-setup-extend-plus ↗

packagehttps://www.npmjs.com/package/unplugin-vue-setup-extend-plus ↗