{"id":27059933,"url":"https://github.com/dparker2/vue-emotion","last_synced_at":"2025-07-18T06:36:57.501Z","repository":{"id":123658806,"uuid":"181370299","full_name":"dparker2/vue-emotion","owner":"dparker2","description":"Use emotion with Vue.js","archived":false,"fork":false,"pushed_at":"2019-05-21T16:32:16.000Z","size":733,"stargazers_count":6,"open_issues_count":3,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-02T14:07:49.693Z","etag":null,"topics":["css-in-js","emotion","emotionjs","styled","styled-components","vue-plugin","vuejs","vuejs2"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/dparker2.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":"2019-04-14T21:19:36.000Z","updated_at":"2021-07-22T07:31:52.000Z","dependencies_parsed_at":null,"dependency_job_id":"7cfdb695-5d45-49d2-b9be-6a33a97083da","html_url":"https://github.com/dparker2/vue-emotion","commit_stats":null,"previous_names":["parkerd559/vue-emotion"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dparker2/vue-emotion","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dparker2%2Fvue-emotion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dparker2%2Fvue-emotion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dparker2%2Fvue-emotion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dparker2%2Fvue-emotion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dparker2","download_url":"https://codeload.github.com/dparker2/vue-emotion/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dparker2%2Fvue-emotion/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265711309,"owners_count":23815508,"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-in-js","emotion","emotionjs","styled","styled-components","vue-plugin","vuejs","vuejs2"],"created_at":"2025-04-05T13:16:59.793Z","updated_at":"2025-07-18T06:36:57.479Z","avatar_url":"https://github.com/dparker2.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-emotion\n\n[![npm version](https://badge.fury.io/js/%40vue-emotion%2Fstyled.svg)](https://badge.fury.io/js/%40vue-emotion%2Fstyled)\n[![Build Status](https://travis-ci.org/ParkerD559/vue-emotion.svg?branch=master)](https://travis-ci.org/ParkerD559/vue-emotion)\n[![Coverage Status](https://coveralls.io/repos/github/ParkerD559/vue-emotion/badge.svg?branch=master)](https://coveralls.io/github/ParkerD559/vue-emotion?branch=master)\n\nUse dynamic styling powered by [emotion](https://emotion.sh/docs/emotion) with Vue.js components.\n\n## Demo Link\nhttps://codesandbox.io/s/github/ParkerD559/vue-emotion-plugin/tree/master\n\n# Styled\n## Installation\n```\nnpm install -D @vue-emotion/styled\n```\n\n## Style Components\n```javascript\nconst StyledButton = styled(MyButton)`\n  border: 1px solid ${color('red')};\n  padding: 10px;\n  height: ${props =\u003e props.height}px;\n  width: ${props =\u003e props.width}px;\n  color: ${props =\u003e props.color};\n  background-color: ${props =\u003e props.backgroundColor};\n`\n```\n\n## Style HTML elements\n```javascript\nconst StyledAnchor = styled.a`\n  text-decoration: none;\n`\n```\n\n## Target styled components\n```javascript\nimport StyledButton from './somewhere'\n\nconst StyledWrapper = styled.section`\n  div \u003e ${StyledButton} {\n    color: #123123;\n  }\n`\n```\n*Note: Doesn't work with object styles*\n\n## Object styles\n```javascript\nconst StyledButton = styled(MyButton)({\n    color: '#0000ff',\n    flex: 1\n})\n```\n\n## Reuse styles using withComponent\n```javascript\nconst StyledButton = styled(MyButton)`\n    height: 100px;\n    width: 200px;\n`\nconst StyledAnchor = StyledButton.withComponent('a');\n// =\u003e StyledButton and StyledAnchor have same styles\n```\n\n# Bugs/Features\n\nPlease feel free to post any issues or feature requests: https://github.com/ParkerD559/vue-emotion/issues\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdparker2%2Fvue-emotion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdparker2%2Fvue-emotion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdparker2%2Fvue-emotion/lists"}