Bring <script setup> to Vue 2
npm install unplugin-vue2-script-setup
Bring to Vue 2. Works for Vite, Nuxt, Vue CLI, Webpack, esbuild and more, powered by unplugin.
> ⚠️ With the release of Vue 2.7, which has Composition API and built-in, you no longer need this plugin. Thereby this plugin has entered maintenance mode and will only support Vue 2.6 or earlier. This project will reach End of Life by the end of 2022.
``bash`
npm i -D unplugin-vue2-script-setup
npm i @vue/composition-api
Install @vue/composition-api in your App's entry (it enables the setup() hook):
`ts
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
`
Vite
`ts
// vite.config.ts
import { defineConfig } from 'vite'
import { createVuePlugin as Vue2 } from 'vite-plugin-vue2'
import ScriptSetup from 'unplugin-vue2-script-setup/vite'
export default defineConfig({
plugins: [
Vue2(),
ScriptSetup({ / options / }),
],
})
`
Example: playground/
Nuxt
> It's built-in in Nuxt Bridge.
Vue CLI
`ts
// vue.config.js
const ScriptSetup = require('unplugin-vue2-script-setup/webpack').default
module.exports = {
parallel: false, // disable thread-loader, which is not compactible with this plugin
configureWebpack: {
plugins: [
ScriptSetup({ / options / }),
],
},
}
`
Example: examples/vue-cli
###### TypeScript
To use TypeScript with Vue CLI, install @vue/cli-plugin-typescript but disable the type check:
`bash`
npm i -D @vue/cli-plugin-typescript vue-tsc
`tsvue-tsc
const ScriptSetup = require('unplugin-vue2-script-setup/webpack').default
module.exports = {
parallel: false,
configureWebpack: {
plugins: [
ScriptSetup({ / options / }),
],
},
chainWebpack(config) {
// disable type check and let handles it`
config.plugins.delete('fork-ts-checker')
},
}
And then use vue-tsc to do the type check at build time:
`jsonc`
// package.json
{
"scripts": {
"dev": "vue-cli-service serve",
"build": "vue-tsc --noEmit && vue-cli-service build"
}
}
Webpack
`ts`
// webpack.config.js
const ScriptSetup = require('unplugin-vue2-script-setup/webpack').default
module.exports = {
/ ... /
plugins: [
ScriptSetup({ / options / }),
]
}
Rollup
`ts
// rollup.config.js
import Vue from 'rollup-plugin-vue'
import ScriptSetup from 'unplugin-vue2-script-setup/rollup'
export default {
plugins: [
Vue(),
ScriptSetup({ / options / }),
]
}
`
esbuild
`ts`
// esbuild.config.js
import { build } from 'esbuild'
import ScriptSetup from 'unplugin-vue2-script-setup/esbuild'
build({
/ ... /
plugins: [
ScriptSetup({
/ options /
}),
],
})
Jest
`bash`
npm i -D vue-jest
`ts`
// jest.config.js
module.exports = {
transform: {
'.*\\.(vue)$': 'unplugin-vue2-script-setup/jest',
},
}
JavaScript API
`ts
import { transform } from 'unplugin-vue2-script-setup'
const Vue2SFC = await transform(
)`
We recommend using VS Code with Volar to get the best experience (You might want to disable Vetur if you have it).
When using Volar, you need to install @vue/runtime-dom as devDependencies to make it work on Vue 2.
`bash`
npm i -D @vue/runtime-dom
###### Global Types
If the global types are missing for your IDE, update your tsconfig.json with:
`jsonc`
{
"compilerOptions": {
"types": [
"unplugin-vue2-script-setup/types"
]
}
}
###### Support Vue 2 template
Volar preferentially supports Vue 3. Vue 3 and Vue 2 template has some different. You need to set the experimentalCompatMode option to support Vue 2 template.
`jsonc`
{
"compilerOptions": {
...
},
"vueCompilerOptions": {
"experimentalCompatMode": 2
},
}
###### ESLint
If you are using ESLint, you might get @typescript-eslint/no-unused-vars warning with