Building Your Application with Styled Components in Vue.js

Matheus Ricelly
Sep 2 · 5 min read

Hi everybody!

This is a translation of an article written in Portuguese using Google Translate. The original article is here.

For those unfamiliar, Styled-Components is a very popular library within the React and React Native community, where it provides developers with the ability to create their CSS code within JavaScript.

Developers with Vue know how easy it is to work with component styling, using CSS along with HTML and JavaScript in a single file; and all this thanks to the power of SFC (Single File Components). This was undoubtedly a very positive point and it helped boost Vue’s popularity in the Front End community.

However, in recent months, I have been using React in the development of a large project, and it was from there, that I knew this library and have used it in the stylization part of it; I even confess that I made the application much more organized and practical. At first it’s kind of confusing, but then you start to like this library a lot.

But like most of my projects I use Vue, so I decided to research a way to unite the practicality of the Style-Components library with the power of Vue.js and its ecosystem. It was then that I discovered that there is a specific library for Vue, maintained by the same creators of React’s styled-components, which is called vue-styled-components.

And if you have projects in React and want to make the switch to Vue (yes, the change process is happening in that direction too and it has increased a lot), with styles created with styled-components, they can be easily migrated, thus earning, agility, performance and scalability.

Get started

But let’s put the conversation aside and let’s go to the code! The process of installing and using vue-styled-components is very simple and practical. With your project created, just install the library using your preferred package manager (Yarn, NPM).

Library installation step

It’s not complicated at all, and you can quickly use the potential of this library in your application. In my GitHub I left a project with examples of stylized tags and some ways to interact with them using vue-styled-components.

Each element/tag used in the examples can be treated by vue-styled-components as an isolated Component with its individual properties, or by receiving data from other components.

In our first example, as introductory and basic as possible, let’s create a button with a default style. Don’t worry right now, customizing these tags, we are slowly evolving into a process where this component can be mapped and allow for dynamic style updates.

Creating the default Button.js file using vue-styled-components

After creating the Button.js file, just use it as you would import any component into Vue and give the file a name for the tag within the HTML code in SFC (I will consider here that you are already familiar with using it). from Vue.js and all of its architecture).

I usually use the letter C as a prefix (which refers to the word Component), to name the custom tags I use in Vue; It’s a good practice I learned from Angular. At this point, anywhere in our application, we can use this stylized component.

Passing properties

In vue-styled-components you can dynamically define styles for a component by passing these values through properties. We will refine our Button component by making it possible to modify the button style according to the parameters passed. In this example we are informing that when the primary attribute is passed, the button will receive a new background style and font color.

There is no secret in this code, simply, we just made a ternary informing if there is the primary attribute it returns one color, if not, will return another. The above example can be improved and even added new properties (you can pass as many attributes as you like); Everything goes according to your need within the project.

Enhancing the properties

Manipulating the properties we receive gives us a chance to get diverse components in a single file, placing conditions that satisfy certain styles. In the example below, you have the opportunity to choose which color scheme you want to assign to your button without affecting the others, thus diversifying your application.

To better explain the process of creating this button: we start (always) calling vue-styled-components, right after (from line 3 to line 6), we need to define which types of properties will be passed to the component, in which case we create two types. , which are type and radius; This second property is just to show if we want a button with rounded edges or not.

From line 8 to 31, we create a function, which takes the value of the type property and makes a conditional (in this case we use the switch) and see the value entered, according to what was passed, it returns the background attributes. color and color of their respective case, if nothing is passed as property, then the button will be given a default value.

From this knowledge, you can implement new attributes such as font size, padding, margin, among other attributes that can make your custom component very dynamic and being used throughout the application.

I left these little examples in my GitHub so you can take the initial step to implement this library. Enjoy and submit new stylized fields to help other friends who also want to learn.

If you enjoyed this article, be sure to share and comment. If you want to know a little more, exchange some ideas (I’m still improving my English, but we can talk), you can leave your comments on the subject and even suggest something for the next articles.

Enjoy and know a little of my work, visit the site, he has my portfolio, my social networks (including GitHub, where you have available some sample applications to practice with Vue.js), and a small space for contacts.

And that’s it, see you next time! My name is Matheus Ricelly, and for your attention, thank you very much!

JavaScript in Plain English

Learn the web's most important programming language.

Matheus Ricelly

Written by

PHP Web Developer and front-end enthusiast

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade