{"id":26182767,"url":"https://github.com/totominc/vue3-select-component","last_synced_at":"2025-04-05T00:05:38.992Z","repository":{"id":221772217,"uuid":"754688118","full_name":"TotomInc/vue3-select-component","owner":"TotomInc","description":"A flexible \u0026 modern select-input control for Vue 3.","archived":false,"fork":false,"pushed_at":"2025-03-27T08:09:00.000Z","size":2159,"stargazers_count":75,"open_issues_count":5,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-28T23:03:51.016Z","etag":null,"topics":["multi-select","select","vue3","vuejs"],"latest_commit_sha":null,"homepage":"https://vue3-select-component.vercel.app/","language":"Vue","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/TotomInc.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2024-02-08T15:23:17.000Z","updated_at":"2025-03-27T08:08:45.000Z","dependencies_parsed_at":"2024-11-06T00:21:15.590Z","dependency_job_id":"f0ad6521-38a1-40e9-ae68-1739ae5ae46c","html_url":"https://github.com/TotomInc/vue3-select-component","commit_stats":null,"previous_names":["totominc/vue3-select-component"],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TotomInc%2Fvue3-select-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TotomInc%2Fvue3-select-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TotomInc%2Fvue3-select-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TotomInc%2Fvue3-select-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TotomInc","download_url":"https://codeload.github.com/TotomInc/vue3-select-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247266562,"owners_count":20910836,"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":["multi-select","select","vue3","vuejs"],"created_at":"2025-03-11T22:24:24.810Z","updated_at":"2025-04-05T00:05:38.970Z","avatar_url":"https://github.com/TotomInc.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cbr /\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://vue3-select-component.vercel.app/\"\u003e\n    \u003cimg src=\"https://vue3-select-component.vercel.app/logo.png\" alt=\"Vue3 Select Component\" height=\"256\" width=\"256\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003e\n  Vue3-Select-Component\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  Best-in-class select component for Vue 3, with a focus on DX, accessibility and ease-of-use.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue3-select-component\" target=\"__blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/vue3-select-component.svg?style=flat\" alt=\"npm package\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://www.npmjs.com/package/vue3-select-component\" target=\"__blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dm/vue3-select-component?style=flat\" alt=\"npm package\" /\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://github.com/TotomInc/vue3-select-component\" target=\"__blank\"\u003e\n    \u003cimg alt=\"GitHub stars\" src=\"https://img.shields.io/github/stars/TotomInc/vue3-select-component?flat\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n \u003ca href=\"https://vue3-select-component.vercel.app/\" target=\"__blank\"\u003eDocumentation\u003c/a\u003e | \u003ca href=\"https://vue3-select-component.vercel.app/getting-started.html\" target=\"__blank\"\u003eGetting Started\u003c/a\u003e | \u003ca href=\"https://vue3-select-component.vercel.app/demo/single-select.html\" target=\"__blank\"\u003eExamples / Demos\u003c/a\u003e\n\u003c/p\u003e\n\n**Core features:**\n\n- ⚙️ Data manipulation with `v-model`\n- 🔑 [Typesafe relationship](https://vue3-select-component.vercel.app/typescript.html) between `options` and `v-model`\n- 🎨 Great styling out-of-the-box, customization with CSS variables \u0026 Vue `:deep`\n- ✅ Single \u0026 multi-select support\n- 🖌️ Infinite customization with `\u003cslot\u003e`s\n- 🪄 `\u003cTeleport /\u003e` menu where you want\n- 📦 Extremely light, **0 dependencies** (4.4kb gzip)\n\n## Installation\n\nInstall the package with npm:\n\n```bash\nnpm i vue3-select-component\n```\n\nUse it in your Vue 3 app:\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { ref } from \"vue\";\nimport VueSelect from \"vue3-select-component\";\n\nconst option = ref(\"\");\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv class=\"my-app\"\u003e\n    \u003cVueSelect\n      v-model=\"option\"\n      :options=\"[\n        { label: 'A Wizard of Earthsea', value: 'wizard_earthsea' },\n        { label: 'Harry Potter and the Philosopher\\'s Stone', value: 'harry_potter', disabled: true },\n        { label: 'The Lord of the Rings', value: 'the_lord_of_the_rings' },\n      ]\"\n    /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n## Advanced TypeScript usage\n\nVue 3 Select Component creates a type-safe relationship between the `option.value` and the `v-model` prop.\n\nIt also leverages the power of generics to provide types for additional properties on the options.\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport type { Option } from \"vue3-select-component\";\nimport { ref } from \"vue\";\nimport VueSelect from \"vue3-select-component\";\n\ntype UserOption = Option\u003cnumber\u003e \u0026 { username: string };\n\nconst selectedUser = ref\u003cnumber\u003e();\n\nconst userOptions: UserOption[] = [\n  { label: \"Alice\", value: 1, username: \"alice15\" },\n  { label: \"Bob\", value: 2, username: \"bob01\" },\n  { label: \"Charlie\", value: 3, username: \"charlie20\" },\n];\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cVueSelect\n    v-model=\"selectedUser\"\n    :options=\"userOptions\"\n    :get-option-label=\"(option) =\u003e `${option.label} (${option.username})`\"\n    placeholder=\"Pick a user\"\n  /\u003e\n\u003c/template\u003e\n```\n\n[There's an entire documentation page](https://vue3-select-component.vercel.app/typescript.html) dedicated to usage with TypeScript.\n\n## Releases\n\nFor changelog, visit [releases](https://github.com/TotomInc/vue3-select-component/releases).\n\n## License\n\nMIT Licensed. Copyright (c) Thomas Cazade 2024 - present.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftotominc%2Fvue3-select-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftotominc%2Fvue3-select-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftotominc%2Fvue3-select-component/lists"}