{"id":16912978,"url":"https://github.com/a145789/vue3-script-to-setup","last_synced_at":"2025-03-22T10:32:09.002Z","repository":{"id":64728831,"uuid":"563325790","full_name":"a145789/vue3-script-to-setup","owner":"a145789","description":"transform your vue3 script to setup mode.","archived":false,"fork":false,"pushed_at":"2023-06-19T02:53:45.000Z","size":18223,"stargazers_count":17,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-03-14T17:14:29.030Z","etag":null,"topics":["setup-script","tranform","vue3"],"latest_commit_sha":null,"homepage":"https://a145789.github.io/vue3-script-to-setup/","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/a145789.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-08T11:36:07.000Z","updated_at":"2024-03-11T03:07:37.000Z","dependencies_parsed_at":"2024-09-26T10:46:03.703Z","dependency_job_id":"e3536729-2374-4bd8-b05f-b88de3022cd2","html_url":"https://github.com/a145789/vue3-script-to-setup","commit_stats":{"total_commits":71,"total_committers":2,"mean_commits":35.5,"dds":0.3098591549295775,"last_synced_commit":"94852c4130ac801a66d371ef95fef6e7a17a8ae0"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a145789%2Fvue3-script-to-setup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a145789%2Fvue3-script-to-setup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a145789%2Fvue3-script-to-setup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a145789%2Fvue3-script-to-setup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/a145789","download_url":"https://codeload.github.com/a145789/vue3-script-to-setup/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244201692,"owners_count":20415130,"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":["setup-script","tranform","vue3"],"created_at":"2024-10-13T19:11:42.956Z","updated_at":"2025-03-22T10:32:08.697Z","avatar_url":"https://github.com/a145789.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003evue3-script-to-setup\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue3-script-to-setup\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"https://badgen.net/npm/v/vue3-script-to-setup\" alt=\"NPM Version\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue3-script-to-setup\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"https://badgen.net/npm/dt/vue3-script-to-setup\" alt=\"NPM Downloads\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/a145789/vue3-script-to-setup/blob/master/LICENSE\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"https://badgen.net/github/license/a145789/vue3-script-to-setup\" alt=\"License\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003eQuickly transform your vue3 script to setup mode\u003c/p\u003e\n\u003cp align=\"center\"\u003e快速将 vue3 script 转换为 setup 模式\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://a145789.github.io/vue3-script-to-setup/#code=PHNjcmlwdCBsYW5nPSJ0cyI%2BDQppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIFByb3BUeXBlLCByZWYgfSBmcm9tICJ2dWUiDQppbXBvcnQgSGVhZGVyIGZyb20gIi4uL2NvbXBvbmVudHMvSGVhZGVyLnZ1ZSINCmltcG9ydCBUYWIgZnJvbSAiLi4vY29tcG9uZW50cy9UYWIudnVlIg0KaW1wb3J0IHRvdWNoZGlyIGZyb20gInZ0b3VjaGRpciINCmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7DQogIG5hbWU6ICdBcHAnLA0KICBjb21wb25lbnRzOiB7DQogICAgSGVhZGVyLA0KICAgIFRhYiwNCiAgfSwNCiAgZGlyZWN0aXZlczogew0KICAgIGZvcmNlOiB7fSwNCiAgICB0b3VjaGRpciwNCiAgfSwNCiAgcHJvcHM6IHsNCiAgICBpdGVtczogQXJyYXkgYXMgUHJvcFR5cGU8bnVtYmVyW10%2BDQogIH0sDQogIGVtaXQ6IFsiY2xpY2siXSwNCiAgc2V0dXAocHJvcHMsIHsgZW1pdCwgYXR0cnMsIHNsb3RzOiBteVNsb3RzLCBleHBvc2UgfSkgew0KICAgIGNvbnN0IGJhciA9IHJlZigwKQ0KICAgIGV4cG9zZSh7IGJhciB9KQ0KICAgIGVtaXQoImNoYW5nZSIpOw0KICAgIHJldHVybiB7DQogICAgICBiYXINCiAgICB9DQogIH0NCn0pDQo8L3NjcmlwdD4NCg0KPHRlbXBsYXRlPg0KICA8ZGl2PkFwcDwvZGl2Pg0KPC90ZW1wbGF0ZT4%3D\u0026codeType=sfc\u0026propsNotOnlyTs=0\" target=\"_blank\"\u003e\n    Playground 在线尝试\n  \u003c/a\u003e\n\u003c/p\u003e\n\n**origin code**\n```html\n\u003cscript lang=\"ts\"\u003e\nimport { defineComponent, PropType, ref } from \"vue\"\nimport Header from \"../components/Header.vue\"\nimport Tab from \"../components/Tab.vue\"\nimport touchdir from \"vtouchdir\"\nexport default defineComponent({\n  name: 'App',\n  components: {\n    Header,\n    Tab,\n  },\n  directives: {\n    force: {},\n    touchdir,\n  },\n  props: {\n    items: Array as PropType\u003cnumber[]\u003e\n  },\n  emit: [\"click\"],\n  setup(props, { emit, attrs, slots: mySlots, expose }) {\n    const bar = ref(0)\n    expose({ bar })\n    emit(\"change\");\n    return {\n      bar\n    }\n  }\n})\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv\u003eApp\u003c/div\u003e\n\u003c/template\u003e\n```\n\n```bash\nnpx tosetup /src/App.vue\n```\n\n**transform code**\n\n```html\n\u003cscript lang=\"ts\" setup\u003e\nimport { ref, useAttrs, useSlots,  } from \"vue\";\nimport Header from \"../components/Header.vue\";\nimport Tab from \"../components/Tab.vue\";\nimport vTouchdir from \"vtouchdir\";\n\nconst props = defineProps\u003c{items?: number[]; }\u003e();\n\nconst emit = defineEmits([\"click\", \"change\"]);\n\n// custom directive \nconst vForce = {};\n\n\nconst attrs = useAttrs();\nconst mySlots = useSlots();\n\nconst bar = ref(0);\n        emit(\"change\");\n defineExpose({ bar });\n\n\n\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv\u003eApp\u003c/div\u003e\n\u003c/template\u003e\n```\n\n## Installation\n\n### npm\n```bash\nnpm install --save-dev vue3-script-to-setup\n```\n\n### yarn\n```bash\nyarn add vue3-script-to-setup -D\n```\n### pnpm\n```bash\npnpm add vue3-script-to-setup -D\n```\n\n## Usage\n\n### Using Command\n\n```bash\nnpx tosetup [filePath]\n```\n\nexample\n```bash\nnpx tosetup /src/App.vue --propsNotOnlyTs\n```\n\nA new `App.new.vue` file will be created in the same directory\n\n将会在同目录下创建一个 `App.new.vue` 的新文件\n\n### command\n\n| options | english | chinese |\n| ------- | ------- | ------- |\n| --propsNotOnlyTs | `props` not using [TypeScript-only Features](https://vuejs.org/api/sfc-script-setup.html#typescript-only-features) | `props` 不使用 [TypeScript-only Features](https://vuejs.org/api/sfc-script-setup.html#typescript-only-features) |\n| --notUseNewFile | instead of creating a new file, replace the contents of the file directly with the `setup` mode | 不创建一个新文件，而是将文件中的内容直接替换为 `setup` 模式 |\n\n### Using tosetup.config\n\nCreate a `tosetup.config.ts/tosetup.config.js` file in the root directory\n\n在根目录下创建一个 `tosetup.config.ts/tosetup.config.js` 文件\n\n```ts\nimport { defineConfig } from \"vue3-script-to-setup\";\n\nexport default defineConfig({\n  propsNotOnlyTs: true,\n  notUseNewFile: true,\n  path: {\n    \"example/src\": {\n      mode: \"*\",\n      excludes: [],\n    },\n    \"example/src/components\": {\n      mode: \"*\",\n      excludes: \"Header.vue\",\n    }, // Find the .vue file in the example/src directory, exclude Header.vue files\n    \"example/src/views\": [\"404.vue\"], // transform only the 404.vue in the example/src/views directory\n  },\n});\n```\n\n```bash\nnpx tosetup \n```\ndefaultOption \n\n```ts\ninterface DefaultOption {\n  propsNotOnlyTs?: boolean;\n  notUseNewFile?: boolean;\n  path: {\n    [key: string]:\n      | string\n      | string[]\n      | {\n          mode: \"*\" | \"**\";\n          excludes: string | string[];\n        };\n  };\n}\n```\n\n## Limitations/限制\n\nUnable to transform `TypeScript-only Features` of `defineEmits`, support only\n\n无法将 `defineEmits` 转换为 `TypeScript-only Features` 模式，仅支持转换为数组\n\n```ts\nconst emit = defineEmits(['change', 'delete'])\n```\n\nIf `expose` is not specified, the reference may fail in the outer layer.\n\n如果在 `script` 代码下子组件没有通过 `expose` 暴露内部状态，转换为 `setup` 代码后父组件将引用失败。\n\n```ts\n// Child.vue\nexport default {\n  setup() {\n    function foo() {}\n    return { foo }\n  }\n}\n\n// Parent.vue\nexport default {\n  mounted() {\n    // Child.vue is script code, it`s work\n    // Child.vue is setup code, foo is undefined, need `expose({ foo })`\n    this.$refs.child.foo()\n  }\n}\n```\n\n## Not supported/不支持\n\n```ts\nexport default defineComponent({\n  name: 'App',\n  ...optoons,  // ❌\n  directives: {\n    ...directives,  // ❌\n  },\n  emit: [\"click\"],\n  // ...options ❌\n  setup(props, { emit, ...options }) {\n    const obj = reactive({ a, b, c })\n    options.expose() // ❌\n    \n    const { ... } = toRefs(obj) // ✅\n    function handle() {} // ✅\n    return {\n      ...toRefs(obj),  // ❌\n      handle() {}, // ❌\n    }\n  }\n})\n```\n\n## License\n\n[MIT](https://github.com/a145789/vue3-script-to-setup/blob/main/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fa145789%2Fvue3-script-to-setup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fa145789%2Fvue3-script-to-setup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fa145789%2Fvue3-script-to-setup/lists"}