{"id":15551365,"url":"https://github.com/vue-styled-components/core","last_synced_at":"2025-04-05T03:03:40.117Z","repository":{"id":230591824,"uuid":"641221053","full_name":"vue-styled-components/core","owner":"vue-styled-components","description":"A CSS tool similar to styled-components for Vue3.js. Help you to develop your vue apps quickly! (vue-styled-components)","archived":false,"fork":false,"pushed_at":"2025-03-31T18:32:50.000Z","size":1288,"stargazers_count":74,"open_issues_count":3,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-31T20:01:51.788Z","etag":null,"topics":["css","css-in-js","styled-components","vue","vue-styled-components","vue3"],"latest_commit_sha":null,"homepage":"https://vue-styled-components.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vue-styled-components.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":{"github":null,"patreon":"akinoc"}},"created_at":"2023-05-16T03:07:51.000Z","updated_at":"2025-03-26T02:00:12.000Z","dependencies_parsed_at":"2024-04-29T09:35:23.178Z","dependency_job_id":"9016ddcb-ad97-4056-8f1d-a59131b9900f","html_url":"https://github.com/vue-styled-components/core","commit_stats":{"total_commits":218,"total_committers":4,"mean_commits":54.5,"dds":0.1330275229357798,"last_synced_commit":"298353d32f754e7163e1acd0f9bf9859ac8c489e"},"previous_names":["vue3-styled-components/vue3-styled-components","v-vibe/vue3-styled-components","v-vibe/vue-styled-components","vue-styled-components/core"],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-styled-components%2Fcore","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-styled-components%2Fcore/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-styled-components%2Fcore/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-styled-components%2Fcore/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vue-styled-components","download_url":"https://codeload.github.com/vue-styled-components/core/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247280262,"owners_count":20912967,"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":["css","css-in-js","styled-components","vue","vue-styled-components","vue3"],"created_at":"2024-10-02T14:04:35.357Z","updated_at":"2025-04-05T03:03:40.102Z","avatar_url":"https://github.com/vue-styled-components.png","language":"TypeScript","funding_links":["https://patreon.com/akinoc"],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg alt=\"Owner avatar\" src=\"https://vue-styled-components.com/logo.png\" width=\"220px\" /\u003e\n  \u003ch1\u003eVue Styled Components\u003c/h1\u003e\n  A CSS tool similar to styled-components and support for vue 3. Help you to develop your apps fastly!\n\n  \u003cbr\u003e\n  \u003cbr\u003e\n\n  [![CI status][github-action-image]][github-action-url]\n  [![NPM version][npm-version]][npm-url]\n  [![minified size][npm-bundle-size]][npm-url]\n  [![Coverage Status][coverage]][codecov-url]\n  [![chat on discord][discord]][discord-url]\n\n  [github-action-image]: https://github.com/vue-styled-components/core/workflows/Code%20Check/badge.svg\n  [github-action-url]: https://github.com/vue-styled-components/core/actions/workflows/code-check.yml\n  [npm-version]: https://img.shields.io/npm/v/%40vue-styled-components%2Fcore\n  [npm-bundle-size]: https://img.shields.io/bundlejs/size/%40vue-styled-components%2Fcore\n  [npm-url]: http://npmjs.org/package/@vue-styled-components/core\n  [coverage]: https://coveralls.io/repos/github/vue-styled-components/core/badge.svg?branch=main\n  [codecov-url]: https://coveralls.io/github/vue-styled-components/core?branch=main\n  [discord]: https://img.shields.io/badge/chat-on%20discord-7289da.svg?sanitize=true\n  [discord-url]: https://discord.gg/UbJxnvt2UH\n\n[Changelog](./CHANGELOG.md) · English · [中文](./README.zh_CN.md)\n\n\u003c/div\u003e\n\n## ✨Feature\n\n✅ Style vue component or styled component\n\n✅ Set default attrs\n\n✅ Passed props\n\n✅ Support theming\n\n✅ Generate keyframes\n\n✅ Generate css mixin\n\n✅ Create global style\n\n✅ Add or override attrs\n\n✅ Support nesting css.\n\n✅ Auto-prefix css.\n\n...\n\n## 📖Documentation\n\nFor detailed introduction and usage instructions, please refer to [the documentation website](https://vue-styled-components.com)\n\n## 🚀Getting Start\n\n### 📦Install\n\n```sh\nnpm i @vue-styled-components/core\n```\n\n```sh\nyarn add @vue-styled-components/core\n```\n\n```sh\npnpm i @vue-styled-components/core\n```\n\n### 💅Basic\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { styled } from '@vue-styled-components/core';\nimport OtherComponent from './VueComponent.vue';\n\nconst StyledDiv = styled('div')`\n  width: 100px;\n  height: 100px;\n  background-color: #ccc;\n  color: #000;\n`;\nconst StyledStyledDiv = styled(StyledDiv)`\n  width: 100px;\n  height: 100px;\n  background-color: #000;\n  color: #fff;\n`;\nconst StyledOtherComponent = styled(OtherComponent)`\n  width: 100px;\n  height: 100px;\n  background-color: red;\n  color: #fff;\n`;\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cStyledDiv\u003eStyled Div\u003c/StyledDiv\u003e\n  \u003cStyledStyledDiv\u003eStyled Styled Div\u003c/StyledStyledDiv\u003e\n  \u003cStyledOtherComponent\u003eStyled Other Vue Component\u003c/StyledOtherComponent\u003e\n\u003c/template\u003e\n```\n\n### 🔧Attrs Setting\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { styled } from '@vue-styled-components/core';\n\nconst StyledDiv = styled.div.attrs({\n  class: 'styled-div'\n})`\n  width: 100px;\n  height: 100px;\n  background-color: #ccc;\n  color: #000;\n`;\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cStyledDiv\u003eStyled Div\u003c/StyledDiv\u003e\n  \u003c!-- \u003cdiv class=\"styled-div\"\u003eStyled Div\u003c/div\u003e --\u003e\n\u003c/template\u003e\n```\n\n### 🕹️Control Dynamic Style by Props\n\nYou must define the props in the `styled` function if you want to use them in the style. Because Vue components\nrequire explicit props declaration so that Vue knows what external props passed to the component should be treated as\nfallthrough attributes.(see [Props Declaration](https://vuejs.org/guide/components/props.html#props-declaration))\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { styled } from '@vue-styled-components/core';\n\nconst StyledDiv = styled('div', {\n  color: String\n})`\n  width: 100px;\n  height: 100px;\n  background-color: #ccc;\n  color: ${(props) =\u003e props.color};\n`;\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cStyledDiv color=\"red\"\u003eStyled Div\u003c/StyledDiv\u003e\n\u003c/template\u003e\n```\n\n### 🧙Theming\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { styled, ThemeProvider } from '@vue-styled-components/core';\n\nconst StyledDiv = styled.div`\n  width: 100px;\n  height: 100px;\n  background-color: #ccc;\n  color: ${(props) =\u003e props.theme.color};\n`;\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cThemeProvider :theme=\"{ color: '#fff' }\"\u003e\n    \u003cStyledDiv\u003eStyled Div\u003c/StyledDiv\u003e\n  \u003c/ThemeProvider\u003e\n\u003c/template\u003e\n```\n\n**More details see [docs site](https://v-vibe.github.io/vue-styled-components/)**\n\n## 🧑‍🤝‍🧑Contributors\n\n\u003ca href=\"https://github.com/vue-styled-components/core/graphs/contributors\"\u003e\n  \u003cimg alt=\"contributor list\" src=\"https://contrib.rocks/image?repo=vue-styled-components/core\" /\u003e\n\u003c/a\u003e\n\n\u003cbr\u003e\n\n## ❤ Thanks\n\n- [styled-components](https://github.com/styled-components).\n- [stylis](https://github.com/thysultan/stylis)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvue-styled-components%2Fcore","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvue-styled-components%2Fcore","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvue-styled-components%2Fcore/lists"}