This course has been updated! We now recommend you take the Introduction to Vue 3 course.

Check out a free preview of the full Introduction to Vue.js course:
The "Simple Transition" Lesson is part of the full, Introduction to Vue.js course featured in this preview video. Here's what you'd learn in this lesson:

Sarah demonstrates how Nuxt.js allows for quickly creating page transitions.

Get Unlimited Access Now

Transcript from the "Simple Transition" Lesson

>> Sarah Drasner: Simple transition. Let's look at NUXT again, because I mentioned that we have the ending part of this. We've kind of done a bunch of things in our animation so far. We've look at the transition component, we've look at transitioning, just from one value to another. We've actually made a ball balance and made a ball roll out.

[00:00:19] We've looked at hooking things up with interaction. We've looked at class and style bindings. And now finally, we're gonna do some page transitions with NUXT. NUXT makes it really easy to do that, because we already have our view components, and that's really how we're routing everything to begin with.

[00:00:35] But aside from that, you might think, okay well, I'm using NUXT and I'm using these view things, I'm just gonna start wrapping things in those transition components. You actually don't have to. Because NUXT is going to assume you might wanna do something like that, so it offers hooks for you right away.

[00:00:52] So if we have this like This is actually what that nuxt.config looks like right away. We have customize, the progress bar color, and we can change that loading thing that goes across, that color. And I'm gonna change it to loading: false, because I'm not gonna use it, I'm gonna do something else.

[00:01:13] Then, again, we have these you know, hooks that we can plug into. It's usually V enter, V enter 2, V enter active, all of these things. But Nuxt, right out of the gate, without us doing anything or saying anything is going to give us this thing called Page.

[00:01:30] So, we have page interactive, page leave active, page enter 2, page, you know, so basically, it's that transition component Prepended with page, and so you can immediately start animating and transitioning the pages. So I'm gonna plug in a bunch of animation in those, if I want to, and then I can have it come from a certain direction and go to a certain direction, I think this is probably too much movement For like an actual page.

[00:01:59] You're sliding pages around is not what you probably want. But I'm showing bigger emotion here so that you kind of get the picture. Cuz if I did something subtle, it wouldn't really get the point across. So that's great. That's so easy. It's like literary the easiest thing. You don't even have to do anything in any of The thing's just somewhere in your CSS, plug into page enter and page leave to.