{"id":13417456,"url":"https://github.com/unplugin/unplugin-vue2-script-setup","last_synced_at":"2025-03-15T02:31:24.822Z","repository":{"id":37720860,"uuid":"398445171","full_name":"unplugin/unplugin-vue2-script-setup","owner":"unplugin","description":"💡 Bring `\u003cscript setup\u003e` to Vue 2.","archived":false,"fork":false,"pushed_at":"2023-08-30T14:20:00.000Z","size":1194,"stargazers_count":603,"open_issues_count":7,"forks_count":39,"subscribers_count":8,"default_branch":"main","last_synced_at":"2024-12-16T21:38:00.801Z","etag":null,"topics":["vue","vue-composition-api","vue-sfc"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/unplugin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"github":["antfu"]}},"created_at":"2021-08-21T02:13:00.000Z","updated_at":"2024-11-29T01:14:09.000Z","dependencies_parsed_at":"2023-09-07T17:41:44.063Z","dependency_job_id":"76e24149-5988-4d78-8ec0-79aed923ab65","html_url":"https://github.com/unplugin/unplugin-vue2-script-setup","commit_stats":null,"previous_names":["antfu/vue2-script-setup-transform","antfu/unplugin-vue2-script-setup"],"tags_count":66,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unplugin%2Funplugin-vue2-script-setup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unplugin%2Funplugin-vue2-script-setup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unplugin%2Funplugin-vue2-script-setup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unplugin%2Funplugin-vue2-script-setup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/unplugin","download_url":"https://codeload.github.com/unplugin/unplugin-vue2-script-setup/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243674858,"owners_count":20329175,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["vue","vue-composition-api","vue-sfc"],"created_at":"2024-07-30T22:00:37.480Z","updated_at":"2025-03-15T02:31:24.475Z","avatar_url":"https://github.com/unplugin.png","language":"TypeScript","readme":"# unplugin-vue2-script-setup\n\n[![NPM version](https://img.shields.io/npm/v/unplugin-vue2-script-setup?color=a1b858\u0026label=)](https://www.npmjs.com/package/unplugin-vue2-script-setup)\n\nBring [`\u003cscript setup\u003e`](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to Vue 2. Works for Vite, Nuxt, Vue CLI, Webpack, esbuild and more, powered by [unplugin](https://github.com/unjs/unplugin).\n\n\u003e ⚠️ With the release of [Vue 2.7](https://blog.vuejs.org/posts/vue-2-7-naruto.html), which has Composition API and `\u003cscript setup\u003e` 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.\n\n## Install\n\n```bash\nnpm i -D unplugin-vue2-script-setup\nnpm i @vue/composition-api\n```\n\nInstall [`@vue/composition-api`](https://github.com/vuejs/composition-api) in your App's entry (it enables the `setup()` hook):\n\n```ts\nimport Vue from 'vue'\nimport VueCompositionAPI from '@vue/composition-api'\n\nVue.use(VueCompositionAPI)\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eVite\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// vite.config.ts\nimport { defineConfig } from 'vite'\nimport { createVuePlugin as Vue2 } from 'vite-plugin-vue2'\nimport ScriptSetup from 'unplugin-vue2-script-setup/vite'\n\nexport default defineConfig({\n  plugins: [\n    Vue2(),\n    ScriptSetup({ /* options */ }),\n  ],\n})\n```\n\nExample: [`playground/`](./playground/)\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eNuxt\u003c/summary\u003e\u003cbr\u003e\n\n\u003e It's built-in in [Nuxt Bridge](https://github.com/nuxt/bridge).\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eVue CLI\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// vue.config.js\nconst ScriptSetup = require('unplugin-vue2-script-setup/webpack').default\n\nmodule.exports = {\n  parallel: false, // disable thread-loader, which is not compactible with this plugin\n  configureWebpack: {\n    plugins: [\n      ScriptSetup({ /* options */ }),\n    ],\n  },\n}\n```\n\nExample: [`examples/vue-cli`](./examples/vue-cli)\n\n###### TypeScript\n\nTo use TypeScript with Vue CLI, install `@vue/cli-plugin-typescript` but disable the type check:\n\n```bash\nnpm i -D @vue/cli-plugin-typescript vue-tsc\n```\n\n```ts\nconst ScriptSetup = require('unplugin-vue2-script-setup/webpack').default\n\nmodule.exports = {\n  parallel: false,\n  configureWebpack: {\n    plugins: [\n      ScriptSetup({ /* options */ }),\n    ],\n  },\n  chainWebpack(config) {\n    // disable type check and let `vue-tsc` handles it\n    config.plugins.delete('fork-ts-checker')\n  },\n}\n```\n\nAnd then use [`vue-tsc`](https://github.com/johnsoncodehk/volar) to do the type check at build time:\n\n```jsonc\n// package.json\n{\n  \"scripts\": {\n    \"dev\": \"vue-cli-service serve\",\n    \"build\": \"vue-tsc --noEmit \u0026\u0026 vue-cli-service build\"\n  }\n}\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eWebpack\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// webpack.config.js\nconst ScriptSetup = require('unplugin-vue2-script-setup/webpack').default\n\nmodule.exports = {\n  /* ... */\n  plugins: [\n    ScriptSetup({ /* options */ }),\n  ]\n}\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eRollup\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// rollup.config.js\nimport Vue from 'rollup-plugin-vue'\nimport ScriptSetup from 'unplugin-vue2-script-setup/rollup'\n\nexport default {\n  plugins: [\n    Vue(),\n    ScriptSetup({ /* options */ }),\n  ]\n}\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eesbuild\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// esbuild.config.js\nimport { build } from 'esbuild'\nimport ScriptSetup from 'unplugin-vue2-script-setup/esbuild'\n\nbuild({\n  /* ... */\n  plugins: [\n    ScriptSetup({\n      /* options */\n    }),\n  ],\n})\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eJest\u003c/summary\u003e\u003cbr\u003e\n\n```bash\nnpm i -D vue-jest\n```\n\n```ts\n// jest.config.js\nmodule.exports = {\n  transform: {\n    '.*\\\\.(vue)$': 'unplugin-vue2-script-setup/jest',\n  },\n}\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eJavaScript API\u003c/summary\u003e\u003cbr\u003e\n\n```ts\nimport { transform } from 'unplugin-vue2-script-setup'\n\nconst Vue2SFC = await transform(`\n\u003ctemplate\u003e\n  \u003c!-- ... --\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\n  // ...\n\u003c/script\u003e\n`)\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n## IDE\n\nWe recommend using [VS Code](https://code.visualstudio.com/) with [Volar](https://github.com/johnsoncodehk/volar) to get the best experience (You might want to disable Vetur if you have it).\n\nWhen using Volar, you need to install `@vue/runtime-dom` as devDependencies to make it work on Vue 2.\n\n```bash\nnpm i -D @vue/runtime-dom\n```\n\n[Learn more](https://github.com/johnsoncodehk/volar#using)\n\n###### Global Types\n\nIf the global types are missing for your IDE, update your `tsconfig.json` with:\n\n```jsonc\n{\n  \"compilerOptions\": {\n    \"types\": [\n      \"unplugin-vue2-script-setup/types\"\n    ]\n  }\n}\n```\n\n###### Support Vue 2 template\n\nVolar 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.\n\n```jsonc\n{\n  \"compilerOptions\": {\n    // ...\n  },\n  \"vueCompilerOptions\": {\n    \"target\": 2\n  }\n}\n```\n\n###### ESLint\n\nIf you are using ESLint, you might get `@typescript-eslint/no-unused-vars` warning with `\u003cscript setup\u003e`. You can disable it and add `noUnusedLocals: true` in your `tsconfig.json`, Volar will infer the real missing locals correctly for you. \n\n## Configurations\n\n\u003cdetails\u003e\n  \u003csummary\u003e\n    Ref Sugar (take 2)\n  \u003c/summary\u003e\n\nIn v0.5.x, we shipped the **experimental** [Ref Sugar (take 2)](https://github.com/vuejs/rfcs/discussions/369) implementation based on Vue 3's [`@vue/reactivity-transform`](https://github.com/vuejs/vue-next/tree/master/packages/reactivity-transform) package. Notice the syntax is not settled yet and might be changed in the future updates. **Use at your own risk!**\n\nTo enabled it, pass the option:\n\n```ts\nScriptSetup({\n  reactivityTransform: true\n})\n```\n\nTo get TypeScript support, update your `tsconfig.json` with:\n\n```jsonc\n{\n  \"compilerOptions\": {\n    \"types\": [\n      \"unplugin-vue2-script-setup/types\",\n      \"unplugin-vue2-script-setup/ref-macros\"\n    ]\n  }\n}\n```\n\n\u003c/details\u003e\n\n## Recommendations\n\nIf you enjoy using `\u003cscript setup\u003e`, you might also want to try [`unplugin-auto-import`](https://github.com/antfu/unplugin-auto-import) to improve the DX even further.\n\n## Progress\n\n- [x] PoC\n- [x] Components registration\n- [x] Compile time macros `defineProps` `defineEmits` `withDefaults` `defineExpose`\n- [x] Global types\n- [x] Merge with normal scripts\n- [x] [Ref Sugar (take 2)](https://github.com/vuejs/rfcs/discussions/369)\n- [x] `\u003ctemplate lang=\"pug\"\u003e` support\n- [x] Vite plugin\n- [x] Webpack plugin\n- [x] Nuxt module\n- [ ] ~~Top-level await~~ (not supported)\n\n## How?\n\n\u003cdetails\u003e\n  \u003csummary\u003e\n    👀\n  \u003c/summary\u003e\n\n![image](https://user-images.githubusercontent.com/11247099/130307245-20f9342e-377b-4565-b55d-1b91741b5c0f.png)\n\nIt's made possible by transforming the `\u003cscript setup\u003e` syntax back to normal `\u003cscript\u003e` and let the Vue 2 SFC compiler handle the rest.\n\n\u003cbr\u003e\u003c/details\u003e\n\n## Sponsors\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg\"\u003e\n    \u003cimg src='https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg'/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## License\n\n[MIT](./LICENSE) License © 2021 [Anthony Fu](https://github.com/antfu)\n","funding_links":["https://github.com/sponsors/antfu"],"categories":["Plugins","TypeScript"],"sub_categories":["Vue"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funplugin%2Funplugin-vue2-script-setup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funplugin%2Funplugin-vue2-script-setup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funplugin%2Funplugin-vue2-script-setup/lists"}