This is a translation of an article written in Portuguese using Google Translate. The original article is here.
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.
Visual primitives for the component age. A simple port for Vue of 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.
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).
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.
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.
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.
You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or…
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 www.fsenaweb.me, 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.
fsenaweb - Overview
Sign up for your own profile on GitHub, the best place to host code, manage projects, and build software alongside 40…
And that’s it, see you next time! My name is Matheus Ricelly, and for your attention, thank you very much!