https://github.com/janumedia/vue-styled-components-example

Styled-components with Vue example
https://github.com/janumedia/vue-styled-components-example

css-in-js jsx styled-components vue vue-cli-3 vue-styled-components

Last synced: about 5 hours ago
JSON representation

Styled-components with Vue example

• Host: GitHub
• URL: https://github.com/janumedia/vue-styled-components-example
• Owner: janumedia
• License: mit
• Created: 2019-01-10T08:45:15.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-27T04:29:15.000Z (almost 2 years ago)
• Last Synced: 2024-05-30T16:29:08.749Z (5 months ago)
• Topics: css-in-js, jsx, styled-components, vue, vue-cli-3, vue-styled-components
• Language: Vue
• Size: 3.05 MB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-styled-components-example

vue-styled-components example based on Vue-CLI 3

## Project setup

#### Create Vue Project using Vue-CLI 3

```

vue create vue-styled-components-example

cd vue-styled-components-example

```

#### Add vue-styled-components

```

yarn add vue-styled-components

```

## Usage

### Basic

#### Vue component with template

```

// ./src/components/PageTitle.vue

import styled from 'vue-styled-components'

const PageTitle = styled.h1`

  font-size: 30px;

  color: blue;

`

export default {

  name: 'page-title-template',

  components: { PageTitle }

}

  

```

#### Vue component with JSX

```

// ./src/components/PageTitleJSX.vue

import styled from 'vue-styled-components'

const PageTitle = styled.h1`

  font-size: 30px;

  color: blue;

`

export default {

  name: 'page-title-jsx',

  render() {

    return (

      <PageTitle>{ this.$slots.default }</PageTitle>

    )

  }

}

```

#### Vue component with JS

```

// ./src/components/PageTitleJS.vue

import styled from 'vue-styled-components'

const PageTitle = styled.h1`

  font-size: 30px;

  color: blue;

`

export default PageTitle

```

### Using Props

#### Vue component with template

```

// ./src/components/PageTitle.vue

import styled, {css} from 'vue-styled-components'

const PageTitle = styled('h1', {alert: Boolean})`

  font-size: 30px;

  color: blue;

  ${props => props.alert && css `

      color: red;

      padding: 20px;

      background-color: yellow;

  `}

`

export default {

  name: 'page-title-template',

  components: { PageTitle },

  props: {

    alert: Boolean

  }

}

  

```

#### Vue component with JSX

```

// ./src/components/PageTitleJSX.vue

import styled, {css} from 'vue-styled-components'

const PageTitle = styled('h1', {alert: Boolean})`

  font-size: 30px;

  color: blue;

  ${props => props.alert && css `

      color: red;

      padding: 20px;

      background-color: yellow;

  `}

`

export default {

  name: 'page-title-jsx',

  props: {

    alert: Boolean

  }

  render() {

    return (

      <PageTitle alert={this.alert}>{ this.$slots.default }</PageTitle>

    )

  }

}

```

#### Vue component with JS

```

// ./src/components/PageTitleJS.vue

import styled, {css} from 'vue-styled-components'

const PageTitle = styled('h1', {alert: Boolean})`

  font-size: 30px;

  color: blue;

  ${props => props.alert && css `

      color: red;

      padding: 20px;

      background-color: yellow;

  `}

`

export default PageTitle

```