Registry / unplugin-vue2-script-setup

unplugin-vue2-script-setup

library0.11.4jsnpmunverified

The `unplugin-vue2-script-setup` library provides a build-tool-agnostic solution to enable the `<script setup>` syntax from Vue 3 within Vue 2 applications. Powered by `unplugin`, it offers compatibility with various bundlers including Vite, Webpack, Rollup, esbuild, Nuxt, and Vue CLI. This package, currently at version 0.11.4, allows developers to write Vue 2 components with a more concise and modern API by transpiling the `<script setup>` block into standard Vue 2 options API. It requires `@vue/composition-api` to be installed and registered in your Vue application. As of Vue 2.7's release, which integrates `<script setup>` natively, this plugin has entered maintenance mode and is only necessary for Vue 2.6 or earlier projects, with an announced End of Life by the end of 2022.

npm install unplugin-vue2-script-setup

github ↗package ↗

INSTALL

IMPORT

SIG · UNPLUGIN-VUE2-SCRI

unplugin-vue2-script-setup

javascriptv0.11.4

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.

ScriptSetup

✓ import ScriptSetup from 'unplugin-vue2-script-setup/vite'

✗ import ScriptSetup from 'unplugin-vue2-script-setup'

Import path varies depending on your bundler (e.g., '/vite', '/webpack', '/rollup', '/esbuild').

ScriptSetup (Webpack)

✓ const ScriptSetup = require('unplugin-vue2-script-setup/webpack').default

✗ const ScriptSetup = require('unplugin-vue2-script-setup/webpack')

For CommonJS environments like Webpack/Vue CLI, use `.default` as the plugin is likely exported as an ESM default.

transform

✓ import { transform } from 'unplugin-vue2-script-setup'

✗ const { transform } = require('unplugin-vue2-script-setup')

This is for programmatic usage of the plugin's core transformation logic, not for bundler integration.

Configures Vite to enable `<script setup>` syntax for Vue 2 components, requiring the Vue Composition API.

import { defineConfig } from 'vite' import { createVuePlugin as Vue2 } from 'vite-plugin-vue2' import ScriptSetup from 'unplugin-vue2-script-setup/vite' import VueCompositionAPI from '@vue/composition-api' import Vue from 'vue' // Ensure Composition API is installed globally in your Vue 2 app entry point // import Vue from 'vue' // import VueCompositionAPI from '@vue/composition-api' // Vue.use(VueCompositionAPI) export default defineConfig({ plugins: [ Vue2(), ScriptSetup({ /* options */ }), ], })

Debug

Known issues

breakingThis plugin has entered maintenance mode and reached its announced End of Life by the end of 2022. It is only intended for Vue 2.6 or earlier projects, as Vue 2.7 provides native `<script setup>` support, making this plugin unnecessary for newer Vue 2 applications. Continued use beyond Vue 2.6 is not recommended.

fix

For Vue 2.7+, remove this plugin and migrate to native `<script setup>`. For ongoing Vue 2.6 support with compliance needs, consider extended support services like HeroDevs' NES for Vue 2.

affects: >=0.0.0

gotchaThe `@vue/composition-api` package is a mandatory peer dependency. It must be explicitly installed (`npm i @vue/composition-api`) and globally registered using `Vue.use(VueCompositionAPI)` in your application entry point to enable the `setup()` hook.

fix

Install `@vue/composition-api` and add `import VueCompositionAPI from '@vue/composition-api'; Vue.use(VueCompositionAPI);` to your main.js/ts.

affects: >=0.0.0

gotchaWhen using this plugin with Vue CLI or Webpack, you must disable `thread-loader` by setting `parallel: false` in your `vue.config.js` or Webpack configuration to avoid compatibility issues.

fix

Add `parallel: false` to your `module.exports` in `vue.config.js` or Webpack configuration.

affects: >=0.0.0

gotchaFor TypeScript support with Vue CLI, you need to install `@vue/cli-plugin-typescript` and `vue-tsc`. It is crucial to disable Vue CLI's built-in `fork-ts-checker` plugin and delegate type checking to `vue-tsc` during the build process (`vue-tsc --noEmit && vue-cli-service build`).

fix

In `vue.config.js`, add `config.plugins.delete('fork-ts-checker')` in `chainWebpack` and update your build script in `package.json` to use `vue-tsc --noEmit` before `vue-cli-service build`.

affects: >=0.0.0

Errors

Common errors & fixes

defu.default is not a function

An internal dependency (`defu`) was incorrectly imported or used in older versions of the plugin.

fix

Upgrade `unplugin-vue2-script-setup` to at least v0.9.0, which includes a fix for this specific issue.

TS2307: Cannot find module '@vue/composition-api' or its corresponding type declarations.

The `@vue/composition-api` peer dependency is missing or not installed.

fix

Run `npm install @vue/composition-api` (or `yarn add @vue/composition-api`) in your project and ensure it's registered with `Vue.use(VueCompositionAPI)`.

[plugin:unplugin-vue2-script-setup] Unexpected token, expected "," (1:XX)

This error typically indicates a syntax parsing issue within the `<script setup>` block, often due to an unsupported feature or malformed code that the plugin's parser cannot handle.

fix

Review the code within your `<script setup>` block for syntax errors, ensure it adheres to the expected Composition API syntax, and check for any conflicting plugins or unusual Vue component structures. Sometimes an outdated `vite-plugin-vue2` could also be a factor.

Upgrade

Version history

0.11.4latest on npm

Audit

Dependencies

@vue/composition-apirequiredRequired to enable the `setup()` hook and Composition API functionality in Vue 2 applications.

@vue/runtime-domoptionalPeer dependency for type compatibility and potentially runtime features when working with Vue 3-style rendering in a Vue 2 context, particularly relevant for Volar integration.

pugoptionalOptional dependency if using Pug for template compilation within Vue Single File Components (SFCs).

Agent activity

10 hits · last 30 days

node

Resources

githubhttps://github.com/antfu/unplugin-vue2-script-setup ↗

packagehttps://www.npmjs.com/package/unplugin-vue2-script-setup ↗