Vue Styled Components

A CSS tool similar to styled-components and support for vue 3. Help you to develop your apps fastly!

Important

The package has been moved to new npm org @vue-styled-components/core and the old org has been deprecated. Please use the new package instead.

✨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

🚀Getting Start

📦Install

npm i @vue-styled-components/core

yarn add @vue-styled-components/core

pnpm i @vue-styled-components/core

💅Basic

<script setup lang="ts">
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;
`;
</script>

<template>
  <StyledDiv>Styled Div</StyledDiv>
  <StyledStyledDiv>Styled Styled Div</StyledStyledDiv>
  <StyledOtherComponent>Styled Other Vue Component</StyledOtherComponent>
</template>

🔧Attrs Setting

<script setup lang="ts">
import { styled } from '@vue-styled-components/core';

const StyledDiv = styled.div.attrs({
  class: 'styled-div'
})`
  width: 100px;
  height: 100px;
  background-color: #ccc;
  color: #000;
`;
</script>

<template>
  <StyledDiv>Styled Div</StyledDiv>
  <!-- <div class="styled-div">Styled Div</div> -->
</template>

🕹️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)

<script setup lang="ts">
import { styled } from '@vue-styled-components/core';

const StyledDiv = styled('div', {
  color: String
})`
  width: 100px;
  height: 100px;
  background-color: #ccc;
  color: ${(props) => props.color};
`;
</script>

<template>
  <StyledDiv color="red">Styled Div</StyledDiv>
</template>

🧙Theming

<script setup lang="ts">
import { styled, ThemeProvider } from '@vue-styled-components/core';

const StyledDiv = styled.div`
  width: 100px;
  height: 100px;
  background-color: #ccc;
  color: ${(props) => props.theme.color};
`;
</script>

<template>
  <ThemeProvider :theme="{ color: '#fff' }">
    <StyledDiv>Styled Div</StyledDiv>
  </ThemeProvider>
</template>

More details see docs site

🧑‍🤝‍🧑Contributors

And thanks