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

Getting Started

First, install the package by running:

npm i vue-styled-components

Then you can create some basic components, for example:

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;
`;

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

You can 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 you 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>

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

The styles in the string are applied automatically.

#software-development #vue #vuejs #styled-components #front-end-development