Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork41
💡 Bring `<script setup>` to Vue 2.
License
unplugin/unplugin-vue2-script-setup
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Bring<script setup> to Vue 2. Works for Vite, Nuxt, Vue CLI, Webpack, esbuild and more, powered byunplugin.
npm i -D unplugin-vue2-script-setupnpm i @vue/composition-api
Install@vue/composition-api in your App's entry (it enables thesetup() hook):
importVuefrom'vue'importVueCompositionAPIfrom'@vue/composition-api'Vue.use(VueCompositionAPI)
Vite
// vite.config.tsimport{defineConfig}from'vite'import{createVuePluginasVue2}from'vite-plugin-vue2'importScriptSetupfrom'unplugin-vue2-script-setup/vite'exportdefaultdefineConfig({plugins:[Vue2(),ScriptSetup({/* options */}),],})
Example:playground/
Nuxt
From v0.28.0 of
@nuxtjs/composition-api, this plugin is included and enabled out-of-box.
npm i @nuxtjs/composition-api
// nuxt.config.jsexportdefault{buildModules:['@nuxtjs/composition-api/module',],scriptSetup:{/* options */},}
This module works for both Nuxt 2 andNuxt Vite
Example:examples/nuxt
Note that<script setup> could co-exist with<script>, if you want to define component metadata likelayout orhead for Nuxt, you can do it this way:
<scriptsetuplang="ts">// your script setup</script><scriptlang="ts">// the normal scriptexportdefault{layout:'user',// ...other meta}</script>
To use TypeScript with Nuxt, install the@nuxtjs/typescript-module but disable the type check:
npm i -D @nuxt/typescript-build vue-tsc
// nuxt.config.jsexportdefault{buildModules:[['@nuxt/typescript-build',{typeCheck:false}],'@nuxtjs/composition-api/module','unplugin-vue2-script-setup/nuxt',],}
And then usevue-tsc to do the type check at build time:
// package.json{"scripts": {"dev":"nuxt","build":"vue-tsc --noEmit && nuxt build" }}
Vue CLI
// vue.config.jsmodule.exports={parallel:false,// disable thread-loader, which is not compactible with this pluginconfigureWebpack:{plugins:[require('unplugin-vue2-script-setup/webpack')({/* options */}),],},}
Example:examples/vue-cli
To use TypeScript with Vue CLI, install@vue/cli-plugin-typescript but disable the type check:
npm i -D @vue/cli-plugin-typescript vue-tsc
module.exports={parallel:false,configureWebpack:{plugins:[require('unplugin-vue2-script-setup/webpack')({/* options */}),],},chainWebpack(config){// disable type check and let `vue-tsc` handles itconfig.plugins.delete('fork-ts-checker')},}
And then usevue-tsc to do the type check at build time:
// package.json{"scripts": {"dev":"vue-cli-service serve","build":"vue-tsc --noEmit && vue-cli-service build" }}
Webpack
// webpack.config.jsmodule.exports={/* ... */plugins:[require('unplugin-vue2-script-setup/webpack')({/* options */}),]}
Rollup
// rollup.config.jsimportVuefrom'rollup-plugin-vue'importScriptSetupfrom'unplugin-vue2-script-setup/rollup'exportdefault{plugins:[Vue(),ScriptSetup({/* options */}),]}
esbuild
// esbuild.config.jsimport{build}from'esbuild'build({/* ... */plugins:[require('unplugin-vue2-script-setup/esbuild')({/* options */}),],})
Jest
npm i -D vue-jest
// jest.config.jsmodule.exports={transform:{'.*\\.(vue)$':'unplugin-vue2-script-setup/jest',},}
JavaScript API
import{transform}from'unplugin-vue2-script-setup'constVue2SFC=transform(`<template> <!-- ... --></template><script setup> // ...</script>`)
We recommend usingVS Code withVolar 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.
npm i -D @vue/runtime-dom
If the global types are missing for your IDE, update yourtsconfig.json with:
{"compilerOptions": {"types": ["unplugin-vue2-script-setup/types" ] }}Volar preferentially supports Vue 3. Vue 3 and Vue 2 template has some different. You need to set theexperimentalCompatMode option to support Vue 2 template.
{"compilerOptions": {... },"vueCompilerOptions": {"experimentalCompatMode":2 },}If you are using ESLint, you might get@typescript-eslint/no-unused-vars warning with<script setup>. You can disable it and addnoUnusedLocals: true in yourtsconfig.json, Volar will infer the real missing locals correctly for you.
Ref Sugar (take 2)
In v0.5.x, we shipped theexperimentalRef Sugar (take 2) implementation based on Vue 3's@vue/reactivity-transform package. Notice the syntax is not settled yet and might be changed in the future updates.Use at your own risk!
To enabled it, pass the option:
ScriptSetup({reactivityTransform:true})
To get TypeScript support, update yourtsconfig.json with:
{"compilerOptions": {"types": ["unplugin-vue2-script-setup/types","unplugin-vue2-script-setup/ref-macros" ] }}If you enjoy using<script setup>, you might also want to tryunplugin-auto-import to improve the DX even further.
- PoC
- Components registration
- Compile time macros
definePropsdefineEmitswithDefaults - Global types
- Merge with normal scripts
- Ref Sugar (take 2)
<template lang="pug">support- Vite plugin
- Webpack plugin
- Nuxt module
Top-level await(not supported)
👀
It's made possible by transforming the<script setup> syntax back to normal<script> and let the Vue 2 SFC compiler handle the rest.
MIT License © 2021Anthony Fu
About
💡 Bring `<script setup>` to Vue 2.
Topics
Resources
License
Code of conduct
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.