Vite Plugin for Vue Script Setup Extension

0.4.0 · abandoned · verified Sun Apr 19

This package, `vite-plugin-vue-setup-extend`, enhances the `<script setup>` syntactic sugar in Vue Single File Components (SFCs). Its primary function is to allow developers to define additional attributes directly on the `<script setup>` tag, such as `name` and `inheritAttrs`, which are typically unavailable in the standard `<script setup>` syntax. This capability is particularly useful for debugging with Vue DevTools, enabling recursive components, or explicitly setting component names for clearer component hierarchies. The current stable version is 0.4.0, but it was last published over four years ago (January 2022). Due to its lack of recent updates, it is considered abandoned and may not be compatible with newer versions of Vue or Vite, which have undergone significant changes since its last release. Users should proceed with caution and be prepared for potential compatibility issues with modern tooling.

Common errors

```
Error [ERR_REQUIRE_ESM]: require() of ES Module ...vite-plugin-vue-setup-extend.js from ...vite.config.js not supported
```
cause Attempting to import the plugin using CommonJS `require()` syntax in a Vite configuration file that expects ESM.

fix Change `const vueSetupExtend = require('vite-plugin-vue-setup-extend')` to `import vueSetupExtend from 'vite-plugin-vue-setup-extend'`.
```
Internal server error: At least one <template> or <script> is required in a single file component.
```
cause This generic Vue/Vite error can sometimes occur if a plugin, especially an outdated one, interferes with SFC parsing or hot module replacement (HMR).

fix Verify the plugin's compatibility with your current Vite and Vue versions. If using an older plugin like `vite-plugin-vue-setup-extend`, consider if it's causing conflicts and disabling it or searching for a maintained alternative. Clear your Node modules and `node_modules/.vite` cache.

Warnings

breaking This package has not been updated in over four years (last publish January 2022). Significant breaking changes have occurred in Vite and `@vitejs/plugin-vue` since then, making this plugin potentially incompatible with newer project setups.
Fix: Consider migrating to alternatives like `unplugin-vue-macros` or manually defining component options if you encounter issues. For new projects, avoid this plugin.
gotcha Vite plugin ordering is crucial. Ensure `vite-plugin-vue-setup-extend` is placed *after* `@vitejs/plugin-vue` in your `plugins` array to ensure it correctly processes Vue SFCs.
Fix: Always add `vueSetupExtend()` after `vue()` in the `plugins` array within `vite.config.ts`.
gotcha Vite configurations are typically ESM-only. Using CommonJS `require()` syntax in `vite.config.js` or `vite.config.ts` will lead to errors, especially for ESM-only packages.
Fix: Ensure your Vite config uses ES module syntax (`import/export`) or rename your config file to `.mjs`/`.mts` if necessary. If facing `ERR_REQUIRE_ESM`, refactor to `import` statements.

Install

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

Imports

vueSetupExtend
wrong:
```
const vueSetupExtend = require('vite-plugin-vue-setup-extend')
```
correct:
```
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
```
Vite configuration files are typically ESM, so `require` is not supported. Use a named import.
defineConfig
```
import { defineConfig } from 'vite'
```
Standard Vite utility for defining configuration, often used alongside this plugin.
vue
```
import vue from '@vitejs/plugin-vue'
```
The official Vue plugin for Vite is a prerequisite and must be included before `vueSetupExtend`.

Quickstart

This configuration demonstrates how to integrate `vite-plugin-vue-setup-extend` into your `vite.config.ts` file. It ensures that the plugin is activated alongside the official `@vitejs/plugin-vue` to extend `<script setup>` syntax capabilities.

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

export default defineConfig({
  plugins: [
    vue(),
    vueSetupExtend()
  ],
  // Other Vite configurations...
});

view raw JSON →