{"id":13709212,"url":"https://github.com/chenxch/unplugin-vue-setup-extend-plus","last_synced_at":"2025-10-25T06:08:44.551Z","repository":{"id":38026969,"uuid":"500527251","full_name":"chenxch/unplugin-vue-setup-extend-plus","owner":"chenxch","description":"Extending the vue script setup syntactic sugar","archived":false,"fork":false,"pushed_at":"2024-02-08T11:50:39.000Z","size":184,"stargazers_count":39,"open_issues_count":4,"forks_count":5,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-27T17:18:02.377Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/chenxch.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"custom":"https://cdn.staticaly.com/gh/chenxch/pic-image@master/20221026/1666791805873.30bhic398gu0.webp"}},"created_at":"2022-06-06T17:20:15.000Z","updated_at":"2025-02-25T05:00:36.000Z","dependencies_parsed_at":"2024-02-08T12:49:21.994Z","dependency_job_id":null,"html_url":"https://github.com/chenxch/unplugin-vue-setup-extend-plus","commit_stats":{"total_commits":67,"total_committers":3,"mean_commits":"22.333333333333332","dds":"0.31343283582089554","last_synced_commit":"95242ed03469eb0d46c6ae7bbd3d18ecac77e163"},"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenxch%2Funplugin-vue-setup-extend-plus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenxch%2Funplugin-vue-setup-extend-plus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenxch%2Funplugin-vue-setup-extend-plus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chenxch%2Funplugin-vue-setup-extend-plus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chenxch","download_url":"https://codeload.github.com/chenxch/unplugin-vue-setup-extend-plus/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243841203,"owners_count":20356443,"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":[],"created_at":"2024-08-02T23:00:36.782Z","updated_at":"2025-10-25T06:08:39.512Z","avatar_url":"https://github.com/chenxch.png","language":"TypeScript","readme":"# unplugin-vue-setup-extend-plus\n\n[![NPM version](https://img.shields.io/npm/v/unplugin-vue-setup-extend-plus?color=a1b858\u0026label=)](https://www.npmjs.com/package/unplugin-vue-setup-extend-plus)\n\nMake the vue script setup syntax support the name attribute\n\n## CHANGELOG\n\n[1.0.1]\n- Fix: auto expose type\n\n[1.0.0]\n- Feat: support auto expose(by [@so11y](https://github.com/so11y))\n\n\n## Feature \n\n- 🌟support auto expose\n- support name\n- support inheritAttrs\n- precise breakpoints\n- Expanded the function of automatic name generation\n## Usage\n### Basic example\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003ehello world {{ a }}\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\" setup name=\"App\" inheritAttrs=\"false\"\u003e\n  const a = 1\n\u003c/script\u003e\n```\n## Install\n\n```bash\nnpm i unplugin-vue-setup-extend-plus\n```\n\n## Options\n\n```ts\nvueSetupExtend({\n  // Advanced mode for name, not necessary\n  mode?: 'none' | 'relativeName' | Function\n  // none: Cancel the setting of name.\n  //       e.g.\n  //       \u003cscript setup name=\"CustomName\"\u003e 'CustomName' \n  // support auto expose\n  enableAutoExpose?: boolean\n})\n\n```\n\n## enableAutoExpose\n\nFirst of all thanks to [@so11y](https://github.com/so11y) for his contribution to this feature.\n\nAfter using the script setup syntax, the export needs to be processed manually. When you need to export the full amount by default, just enable this property. The usage is as follows:\n\nmain.ts\n```ts\nimport { createApp } from 'vue'\nimport autoExpose from 'unplugin-vue-setup-extend-plus/dist/client/index'\nimport App from './App.vue'\n\ncreateApp(App).use(autoExpose).mount('#app')\n```\n\nComp.vue\n```vue\n\u003cscript setup\u003e\nimport { ref } from 'vue'\nconst numb = ref(50)\n\u003c/script\u003e\n```\nApp.vue\n```vue\n\u003cscript setup\u003e\nimport { onMounted, ref } from 'vue'\nconst el = ref()\nonMounted(() =\u003e { console.log(el.value.num) }) // 50\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cComp ref=\"el\" /\u003e\n\u003c/template\u003e\n```\n## Script Tag Attributes\n\n### name\n\n`Set a name for the component, similar to the name attribute in the option API notation.`\n\n[name docs](https://vuejs.org/api/options-misc.html#name)\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003ehello world {{ a }}\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\" setup name=\"App\"\u003e\n  const a = 1\n\u003c/script\u003e\n```\n\n### inheritAttrs\n\n`If you do not want a component to automatically inherit attributes, you can set inheritAttrs: false in the component's options.`\n\n[inheritAttrs docs](https://vuejs.org/api/options-misc.html#inheritattrs)\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003ehello world {{ a }}\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\" setup name=\"App\" inheritAttrs=\"false\"\u003e\n  const a = 1\n\u003c/script\u003e\n```\n\n### extendIgnore\n\n`Since the user may define the name attribute of the component in the script tag, this conflicts with the default name set by this plugin. So you need to add a switch attribute to the script setup.`\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003ehello world {{ a }}\u003c/div\u003e\n\u003c/template\u003e\n\n// name=\"App\" will be invalid\n\u003cscript lang=\"ts\" setup name=\"App\" inheritAttrs=\"false\" extendIgnore\u003e\n  const a = 1\n\u003c/script\u003e\n```\n\n\n\u003cdetails\u003e\n\u003csummary\u003eVite\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// vite.config.ts\nimport vueSetupExtend from 'unplugin-vue-setup-extend-plus/vite'\n\nexport default defineConfig({\n  plugins: [\n    vueSetupExtend({ /* 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 vueSetupExtend from 'unplugin-vue-setup-extend-plus/rollup'\n\nexport default {\n  plugins: [\n    vueSetupExtend({ /* options */ }),\n  ],\n}\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\n\u003cdetails\u003e\n\u003csummary\u003eWebpack\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// webpack.config.js\nmodule.exports = {\n  /* ... */\n  plugins: [\n    require('unplugin-vue-setup-extend-plus/webpack').default({ /* options */ })\n    // or\n    // require('unplugin-vue-setup-extend-plus/webpack')({ /* options */ })\n  ]\n}\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eNuxt\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// nuxt.config.js\nexport default {\n  buildModules: [\n    ['unplugin-vue-setup-extend-plus/nuxt', { /* options */ }],\n  ],\n}\n```\n\n\u003e This module works for both Nuxt 2 and [Nuxt Vite](https://github.com/nuxt/vite)\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eVue CLI\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// vue.config.js\nmodule.exports = {\n  configureWebpack: {\n    plugins: [\n      require('unplugin-vue-setup-extend-plus/webpack')({ /* options */ }),\n    ],\n  },\n}\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n## Expansion based on [vite-plugin-vue-setup-extend](https://github.com/vbenjs/vite-plugin-vue-setup-extend)\n\n## License\n\nMIT\n","funding_links":["https://cdn.staticaly.com/gh/chenxch/pic-image@master/20221026/1666791805873.30bhic398gu0.webp"],"categories":["Vite 插件"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchenxch%2Funplugin-vue-setup-extend-plus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchenxch%2Funplugin-vue-setup-extend-plus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchenxch%2Funplugin-vue-setup-extend-plus/lists"}