Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vue-styled-components/core
A CSS tool similar to styled-components for Vue3.js. Help you to develop your vue apps quickly! (vue-styled-components)
https://github.com/vue-styled-components/core
css css-in-js styled-components vue vue-styled-components vue3
Last synced: 7 days ago
JSON representation
A CSS tool similar to styled-components for Vue3.js. Help you to develop your vue apps quickly! (vue-styled-components)
- Host: GitHub
- URL: https://github.com/vue-styled-components/core
- Owner: vue-styled-components
- License: apache-2.0
- Created: 2023-05-16T03:07:51.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-04T02:28:32.000Z (2 months ago)
- Last Synced: 2025-01-15T10:57:06.459Z (18 days ago)
- Topics: css, css-in-js, styled-components, vue, vue-styled-components, vue3
- Language: TypeScript
- Homepage: https://vue-styled-components.com
- Size: 1.2 MB
- Stars: 72
- Watchers: 1
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
Vue Styled Components
A CSS tool similar to styled-components and support for vue 3. Help you to develop your apps fastly!
[![CI status][github-action-image]][github-action-url]
[![NPM version][npm-version]][npm-url]
[![minified size][npm-bundle-size]][npm-url]
[![Coverage Status][coverage]][codecov-url]
[![chat on discord][discord]][discord-url]
[github-action-image]: https://github.com/vue-styled-components/core/workflows/Code%20Check/badge.svg
[github-action-url]: https://github.com/vue-styled-components/core/actions/workflows/code-check.yml
[npm-version]: https://img.shields.io/npm/v/%40vue-styled-components%2Fcore
[npm-bundle-size]: https://img.shields.io/bundlejs/size/%40vue-styled-components%2Fcore
[npm-url]: http://npmjs.org/package/@vue-styled-components/core
[coverage]: https://coveralls.io/repos/github/vue-styled-components/core/badge.svg?branch=main
[codecov-url]: https://coveralls.io/github/vue-styled-components/core?branch=main
[discord]: https://img.shields.io/badge/chat-on%20discord-7289da.svg?sanitize=true
[discord-url]: https://discord.gg/UbJxnvt2UH
[Changelog](./CHANGELOG.md) · English · [中文](./README.zh_CN.md)
## ✨Feature
✅ Style vue component or styled component
✅ Set default attrs
✅ Passed props
✅ Support theming
✅ Generate keyframes
✅ Generate css mixin
✅ Create global style
✅ Add or override attrs
✅ Support nesting css.
✅ Auto-prefix css.
...
## 📖Documentation
For detailed introduction and usage instructions, please refer to [the documentation website](https://vue-styled-components.com)
## 🚀Getting Start
### 📦Install
```sh
npm i @vue-styled-components/core
```
```sh
yarn add @vue-styled-components/core
```
```sh
pnpm i @vue-styled-components/core
```
### 💅Basic
```vue
import { styled } from '@vue-styled-components/core';
import OtherComponent from './VueComponent.vue';
const StyledDiv = styled('div')`
width: 100px;
height: 100px;
background-color: #ccc;
color: #000;
`;
const StyledStyledDiv = styled(StyledDiv)`
width: 100px;
height: 100px;
background-color: #000;
color: #fff;
`;
const StyledOtherComponent = styled(OtherComponent)`
width: 100px;
height: 100px;
background-color: red;
color: #fff;
`;
Styled Div
Styled Styled Div
Styled Other Vue Component
```
### 🔧Attrs Setting
```vue
import { styled } from '@vue-styled-components/core';
const StyledDiv = styled.div.attrs({
class: 'styled-div'
})`
width: 100px;
height: 100px;
background-color: #ccc;
color: #000;
`;
Styled Div
```
### 🕹️Control Dynamic Style by Props
You must define the props in the `styled` function if you want to use them in the style. Because Vue components
require explicit props declaration so that Vue knows what external props passed to the component should be treated as
fallthrough attributes.(see [Props Declaration](https://vuejs.org/guide/components/props.html#props-declaration))
```vue
import { styled } from '@vue-styled-components/core';
const StyledDiv = styled('div', {
color: String
})`
width: 100px;
height: 100px;
background-color: #ccc;
color: ${(props) => props.color};
`;
Styled Div
```
### 🧙Theming
```vue
import { styled, ThemeProvider } from '@vue-styled-components/core';
const StyledDiv = styled.div`
width: 100px;
height: 100px;
background-color: #ccc;
color: ${(props) => props.theme.color};
`;
Styled Div
```
**More details see [docs site](https://v-vibe.github.io/vue-styled-components/)**
## 🧑🤝🧑Contributors
## ❤ Thanks
- [styled-components](https://github.com/styled-components).
- [stylis](https://github.com/thysultan/stylis)