The time has finally come to make our app look a bit nicer. In this article we'll explore the different ways of styling Vue components with CSS.
Before we move on to add more advanced features to our app, we should add some basic CSS to make it look better. Vue has three common approaches to styling apps:. External CSS files. Global styles in Single File Components (.vue files). Component-scoped styles in Single File Components.
To help familiarize you with each one, we'll use a combination of all three to give our app a nicer look and feel. You can include external CSS files and apply them globally to your app.
Let's look at how this is done. To start with, create a file called reset.css in the src/assets directory.
Styling with external CSS files
Files in this folder get processed by Webpack. This means we can use CSS pre-processors (like SCSS) or post-processors (like PostCSS). While this tutorial will not be using such tools, it's good to know that when including such code in the assets folder it will be processed automatically.
Step 1 — Setting Up the Project
Add the following contents to the reset.css file:. Next, in your src/main.js file, import the reset.css file like so:. This will cause the file to get picked up during the build step and automatically added to our site.
Step 4 — Using Computed Properties
The reset styles should be applied to the app now. The images below show the look of the app before and after the reset is applied. Noticeable changes include the removal of the list bullets, background color changes, and changes to the base button and input styles. Now that we've reset our CSS to be uniform across browsers, we need to customize the styles a bit more.
- There are some styles that we want to apply across components in our app.
- While adding these files directly to the reset.css stylesheet would work, we'll instead add them to the