Theme your app with Styled Components 💅 in Vue

Styled components are popular in the React community, and they give your components the power of css in js.

Vue can also use styled components via the vue-styled-components module.

yarn add vue-styled-components
npm install vue-styled-components

Using styled components is one way that you can create some interesting components.

In the following example, we can create a button that accepts props for various styling, and can then be mapped to input elements to allow for real time styling updates of the button.

	import styled from "vue-styled-components";
	const buttonProps = { color: String, br: String, pad: String, bgc: String };
	export const StyledButton = styled("button", buttonProps)`
	color: ${props => props.color};
	border-radius: ${props => props.br};
	padding: ${props => props.pad};
	background-color: ${props => props.bgc};
	letter-spacing: 1px;
	`;

view raw StyledButton.js hosted with ❤ by GitHub

Now, anywhere in our application we can use this styled component, and even bind dynamic data to these props.

	<template>
	<div>
	<styled-button
	:color="dynColor"
	:br="dynBr + 'px'"
	:pad="dynPad + 'px'"
	:bgc="dynBgc"
	@click="alertButton"
	>I am a dynamically styled button. Change the fields below!</styled-button>
	<br>
	<span>Text Color</span>
	<input type="color" v-model="dynColor">
	<br>
	<span>Background Color</span>
	<input type="color" v-model="dynBgc">
	<br>
	<span>Padding (will be set in px)</span>
	<input type="number" v-model="dynPad">
	<br>
	<span>Border Radius (will be set in px)</span>
	<input type="number" v-model="dynBr">
	</div>
	</template>
	<script>
	import { StyledButton } from "../styled-components/StyledButton.js";
	export default {
	name: "StyledTyler",
	components: {
	"styled-button": StyledButton
	},
	data() {
	return {
	dynColor: "#ffffff",
	dynBr: 10,
	dynPad: 15,
	dynBgc: "#4ABB00"
	};
	}
	};
	</script>
	<!-- Add "scoped" attribute to limit CSS to this component only -->
	<style scoped>
	input {
	width: 50%;
	text-align: center;
	margin-top: 20px;
	}
	</style>

view raw ButtonUsage.vue hosted with ❤ by GitHub

The above example shows us importing in the StyledButton.js, and then using this component in a vue single file component in a way that binds a few input elements to the data as well.

I usually like to use Tailwind CSS with my projects, so I will often add that into the mix as well. Here is another example of a similar idea with a styled component button.

This example, also utilizes some simple transitions, toggle method, an alert that shows the current styling data, and an example of a more "static" version of the button along with the dynamically styled button.

Once these values are saved to something like local storage, or a user's preferences in a database, you can then use them to style the application dynamically.

I'm honestly not even really all that sure how useful this type of implementation is, since using data bound inline styles would offer a similar thing, but a fellow dev that uses react and styled components wanted to know if they were doable in Vue, so I gave it a shot.

What other ways have you themed your vue applications dynamically?