Get Started with Nuxt with Debbie O'Brien

Nuxt Global Styles and Transitions

It's time to improve the styling of our application. In order to have styles that are available on all pages we can add the styles direct in the layout just like we were doing but we can also add a global CSS file so that styles are available across all pages and all layouts.

Let's add a main.css file into the assets folder.

We can paste in the styles from our layouts and pages.

If we look in our browser you will now see we have lost our styling.

In order to use our main.css file we need to register it in our nuxt config by adding it to the css property. We use the tilde to see go to route level to the assets folder and find the main.css file.

Now in our browser we have our styles. Great.

Nuxt comes with postcss already installed so you can use it directly and don't have to worry about adding vendor prefixes to your CSS rules as this is done automatically for you using values from the Can I use database. We can also use css variables without having to worry about browser support. And as you can see cssSourceMaps are included in when working in dev. Cool.

While we have the inspector open let's take a look at our navigation. Wouldn't it be good to have a different style for the link that is active. If we inspect the nav you will see that Nuxt adds a class of nuxt-link-exact-active and nuxt-link-active to the active link. They are pretty much the same but the exact one will make sure it only matches exact links. Let's use this in our css to style our active links.

We can create a secondary color and use that for our nuxt-exact-active-link. Then we can add some other minor styling to our navigation and links.

In our browser you will see our active link is a nice green color and our non active link is grey. Nice

While we are on the subject of changing pages. Wouldn't it be great to have some sort of fade transition for when navigating between pages. So how do we do that? Nuxt uses the transition component to let you create amazing transitions/animations between your routes. All we have to do is add our transitions in our css file using enter-active and leave-active and prefixing them with page or layout.

And as you can see we now have a lovely fade transition between our pages and layouts. But what if we wanted to have a different transition on our planet pages for example. Well we can do that by adding a new transition. Let's bounce from one planet to the other with a bounce transition. We can include a bounce in and bounce out animation using keyframes.

Then in order to use our transition we need to add the transition property to our slug page which has all our planets. The value is the name of our transition, in this case bounce.

And there we have it. We are no able to bounce from one planet to the other and fade between our home and about page. Very cool. Remember all we had to do was define our animations in our css file and then use the transition property on the pages that want a specific transition. Those that have none defined will use the default transition of page.

We are getting so close to launching this app. In the next lesson we will do just that.


your progress