To created component with built-in styles with a few lines of code, we can use the vue-styled-components to create them.

Getting Started

First, we install the package by running:

npm i vue-styled-components

Then we can create some basic components by writing:

import styled from "vue-styled-components";

export const StyledTitle = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

export const StyledHeader = styled.header`
  padding: 4em;
  background: yellow;
`;

We import the package then use the template tags that came with the code to create new styled elements.

We change the font size, text alignment, and other things with the tags.

The h1 tag makes an h1 element.

header makes a styled header element.

Then we can use it by registering the component and use it:

<template>
  <div id="app">
    <styled-header>
      <b>header</b>
    </styled-header>
    <styled-title>hello</styled-title>
  </div>
</template>

<script>
import { StyledTitle, StyledHeader } from "./components";

export default {
  name: "App",
  components: {
    "styled-title": StyledTitle,
    "styled-header": StyledHeader
  }
};
</script>

We just register them in components and reference it in our templates.

The styles in the string are applied automatically.

Props

Like any other component, we can pass props to them.

We can create an element by writing:

import styled from "vue-styled-components";

export const StyledInput = styled.input`
  font-size: 1.25em;
  padding: 0.5em;
  margin: 0.5em;
  color: palevioletred;

  &:hover {
    box-shadow: inset 1px 1px 2px red;
  }
`;

Then we can write:

<template>
  <div id="app">
    <styled-input v-model="val" placeholder="val"/>
    <p>{{val}}</p>
  </div>
</template>

<script>
import { StyledInput } from "./components";

export default {
  name: "App",
  data() {
    return {
      val: ""
    };
  },
  components: {
    "styled-input": StyledInput
  }
};
</script>

Whatever we entered is displayed below it.

This is because it takes the value prop and emits the input event like any other component.

The styles we specified are also applied.

The placeholder prop also works and the placeholder is applied.

Adapting Based on Props

We can change styling based on props that we passed in.

For instance, we can write:

import styled from "vue-styled-components";

const btnProps = { primary: Boolean };

export const StyledButton = styled("button", btnProps)`
  font-size: 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
  background: ${props => (props.primary ? "green" : "white")};
  color: ${props => (props.primary ? "white" : "red")};
`;

to let our component takes props.

We specify the btnProps object to let our StyledButton takes props.

btnProps specifies the props that our component takes. We specified that our component takes the primary prop.

Then we can use it by writing:

<template>
  <div id="app">
    <styled-button primary>button</styled-button>
  </div>
</template>

<script>
import { StyledButton } from "./components";

export default {
  name: "App",
  data() {
    return {
      val: ""
    };
  },
  components: {
    "styled-button": StyledButton
  }
};
</script>

We set the primary prop to true, so we get a green background and white text.

Conclusion

We can create styled-components with vue-styled-components.

The package lets us create elements with styles applied to them so we can use them as Vue components.