Vue Class Style Component

Posted on  by admin

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.

Familiarity with the core HTML, CSS, and JavaScript languages, knowledge of the terminal/command line. Vue components are written as a combination of JavaScript objects that manage the app's data and an HTML-based template syntax that maps to the underlying DOM structure. For installation, and to use some of the more advanced features of Vue (like Single File Components or render functions), you'll need a terminal with node + npm installed.

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.

TypeScript Friendly

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.

  1. There are some styles that we want to apply across components in our app.
  2. While adding these files directly to the reset.css stylesheet would work, we'll instead add them to the