Vue Router Live Workshop 2019-10-22 Part 1

Vue Router Live Workshop 2019-10-22 Part 2

Vue Router Live Workshop 2019-10-22 Part 3

Live Workshop Recording

Man 1: [00:00] Is there a way to explore what you can pass to RouterLink?

Laurie Barth: [00:05] Yep.

Man 1: [00:05] All of its defined props?

Laurie: [00:07] Yep. There is an API reference, which I will put in our chat. As you can tell, there's a whole lot to replace, append tag, active class, exact event, exact active class, props, name, link active class, etc., instance methods, etc.

[00:42] There's RouterLink stuff, and then it also in here defines router Vue stuff, then other route-API things. This is the more "dictionary-textbooky" explanations, compared to this page and the essentials and advanced, which is a bit more story-narrative focused with code samples.

[01:11] This is, "Find your keyword and look at the explanation" textbook API docs. OK, "Do you still have 'requires off true' on your Egghead path and 'add line turns to false' to be able to access that page?"

[01:26] I do have "requires off equals true," but I've set my "'is authenticated" to return true, so it shouldn't balk, because now it thinks the user's authenticated. Yes, Brian, the internal single quotes every time. I don't know why, but it has to be every time.

[01:55] Log does not exist error. OK, did you go into your main.js file and add blog as a name on your blog route? Something like this, instead of just being a path. Let me know if that solves it, Amy. Cool.

"[02:33] Do you never have to import components?" What do you mean? Oh, so, no. As long as Vue Router is set up for our project, we don't need to import the individual components that are provided to us by it. I know. It's nice. Cleans things up.

[02:58] You do have to import components that you created for yourself when you're passing things around. Vue.usevuerouter, and then passing the router in, it takes care of all that for us. It's now available to use in our entire application. I like that, too. It's clean. How's everybody doing?

[03:30] Everyone muted themselves, because they have such good workshop protocol. Great. All caught up. All caught up. All caught up. William, how are you? I see you typing away.

[03:53] Isabel, Chris. Doing good. I'm good. Good. I was waiting on the refresh. Cool. We have actually gotten to the last part of this, in which we're going to change everything we just did. Which means we are going to introduce a lot of errors, I'm sure, because there's multiple steps to this process.

[04:21] We're going to keep everything in our individual components. That's fine. I don't know about you, looking at this, this seems to take up a lot of space in our main JS file, I don't really love. We are going to refactor. The common situation is to add a router directory and an index.js inside of it.

[04:49] You can add a top-level router.js if you want to. Sorry, this shouldn't go in components, this should go in source. That was accidental. You can add a router.js if you want to, but we're actually going to break this down a couple different levels deep. I would recommend doing the directory with the index file, and then we'll do other stuff.

[05:12] We are going to take everything from our imports all the way down. Remove it from here, we'll fix that in a sec, and put it in index. There's a few things we got to do from the start. We didn't need that. We are still at the dot-slash components. No we're not. We're at dot, dot, slash, aren't we? Let me double-check.

[05:42] There we go. We're at dot, dot, slash. Yes, I'm really terrible at whatever the shortcuts are for these things. We're going to have to change these so that we're routing to the same components.

[06:02] Vue.use. I shouldn't have gotten rid of that. I need to import Vue from vue. That's what I wanted. Oops. This is what happens when I do things too quickly. Copying and pasting. We don't need any of this. We need app here and we need Vue in here. There we go. That's how we do our routing wired up.

[06:31] We get to keep everything we had before. The only difference is we need to default export our router. Now we can fix main JS by importing router from ./router/index. All of a sudden, this is happy again. That's good. If we refresh our project, everything works again. That's one bit of cleanup, but I think we can do better.

[07:10] We have a lot of stuff here. In particular, I don't know, I feel like the blog one's ugly. I'm going to make a new file and I'm going to call it blogroutes.js. Not JX, JS. There we go. I'm going to pull this out. I'm going to create blog routes. It's just going to be an array. It's going to have this gnarliness in it.

[07:52] I need to pull the imports out. Oops. Again, refactoring is never clean, because you're jumping back and forth between things and introducing errors. Wait for it. Then we're going to export blog routes. Now I can jump back over here and import blog routes from ./blogroutes. Then, it went here.

[08:39] I'm going to use spread syntax, because it'll spread out the whole object for us. It's as if everything was in main.js all along. We can go to our blog. We can go to Egghead. We can try and go nowhere. We can try and go to failed off. We can do everything we could do before, except now our main.js file is very clean. All of our routing information is here.

[09:27] We can see that we can start pulling out whatever individual route definitions, or even if we wanted to pull out just the children definition and pull that back in for nested routes, we can do all of this and start refactoring.

[09:43] You don't need to refactor exactly the way I did. You don't even need to refactor two levels deep like I did. I would like you to get your router working with nothing but this in main.js. Please, and thank you. Don't do this at home, kids. The index.js file is the same thing that we had in the main.js file. If you wanted to copy and paste it, you could.

[10:19] The only difference is that we now have to export something that we can import in main.js and there's one or two imports we had that we don't need anymore.

Man 2: [10:32] Could you go back up to the top of index.js?

Laurie: [10:36] Mm-hmm. Nothing is getting displayed, but I'm not getting any errors. Ooh, that's fun. I love debugging situations like that. Are you importing your router back into main.js? OK, and you still have this, right? OK, are you exporting your router? OK, what version of this are you doing? Did you do two levels, or are you just doing the index.js version for now? Two levels, OK.

[11:43] Did you create your blog routes array and export it? Yep, but is blog routes an array, or is it just an object? It's an array. OK, cool. You're importing it here? You're using the spread operator here? Now re-run npm run serve and see if it is a hot reloading error. Oh, sorry. I hadn't seen that you posted the whole blog routes thing. Good job, William.

[12:41] That path in children? You mean the empty path in children? The one that's...? That one's fine. Mine's empty too. It's the default thing.

"[13:04] Has one quote." No, that's not a double quote. Maybe you misspelled something. It's certainly possible. I would think you would get an error. Do you want to do the import screenshot thing you did before that helped us figure out the components error?

[13:27] I would also say, "Maybe go one level less for now. Put the blog routes stuff back in index.js, so we're only debugging two of them." You can also do all three. How's everybody else doing? Good? Cool. Plus one. Cool, cool. Plus one. All good here. Great.

[13:57] Is this now starting to look like something you would actually see in an application with all kinds of weird, gnarly stuff that you're like, "Oh, but it's clean, and I can see it, and I understand it, and it's consistent, and it doesn't do things like recast all of my paths into an Angular directive in order for me to access the parameters"? No, I'm not bitter. It's fine.

"[14:23] When I'm doing it only one level, it works just fine." Cool. Something is happening with your blog routes. Let's look at that. Export default blog routes const blog routes. That all looks fine. The only thing that could be happening is you need to import blog routes up top and make sure that your level of depth is correct for where your blog routes folder is.

[14:50] Then you want to do your spread operator for importing blog routes. Those are the only two things that differ between doing it one level deep and doing it two levels deep. My suspicion is that there's something wrong with this path, or there's a typo between these two things. Typos are the most evil errors. One character, two hours of debugging.

[15:18] Yes. Also double-check to make sure that you have your three. You should be importing guest post, blog, and Egghead. Again, those need to be two levels deep if you're doing it the same way. I missed an import and got a blank screen. Yea. Maybe we need better errors on that. This is why refactoring causes problems, everybody.

[15:43] I, obviously, will continue to answer this debugging question, but we have reached the end of our road, which is when I open it up to questions about other use cases that you would like to ask about, or other situations where you might find yourself wanting to do something different that we didn't cover.

[16:04] Obviously, the whole point of this workshop is that I'm going to be making a series of videos on all of these topics. I want to make sure that I'm covering the stuff that people need or would expect to see when they actually use this in the real world.

[16:17] Have at me if you've got anything you want to chime in on, but also I won't make you stay here if you've got to run back to work. Cool. Thanks, everyone. Everyone's just nodding their head quietly. They're like, "OK, sounds good. VueRouter made this really easy, so Laurie just had to speak."

Man 1: [16:42] Something like code-splitting at the route level, can you do that?

Laurie: [16:48] What do you mean when you say "code-splitting"?

Man 1: [16:52] In React, you can split all of your...I guess it's a different feature rather than around a specific Vue route. You don't load all of the code for all of your app when you are on the blog route versus you don't load the code for Egghead.

Laurie: [17:15] Yeah. There's a lazy loading. I actually saw someone on the core team doing this just the other day. There is a lazy loading feature that you can use, that is technically part of Vue proper, that can then hook into navigation. Yes, that is absolutely something that you can do.

"[17:35] Uncaught error. VueRouter path is required in a route configuration." You have path. You have path. The only possible thing is that Zachary, and I can't remember who said it, I'm sorry, was joking about this being a quote. It should be two empty things. It's the equivalent of doing that.

[17:59] It could be possible that somehow that got messed up or there's a linter error or something. This is the only thing that wouldn't have a path defined just based on a screenshot versus what's actually in your IDE. Anyone else?

Man 2: [18:15] For the lazy loading, that's just in regular Vue, that's not something specific to router?

Laurie: [18:25] Yeah. Lazy loading Routes, they have examples of it again in the Vue documentation. This is where you can import stuff directly. I know people who have actually defined for themselves lazy loading functions that they then just pass to wrap everything else. It's one of those things that there's a bunch of different ways that you can do it.

[19:00] Who has a good pattern for it? Go away. Lazy loading, oh, yeah. When you have your component we've just been navigating directly to it. You can wrap it in a function like Lazy Load. I can't remember if that's built in or not. I think it is built in. Lazy Load is built in, you can also extend Lazy Load to do something slightly different in your specific circumstance and still use it.

[19:44] You can extend it within your router file. Vue has the option of extending existing functionality. It's a Java thing. Then you can call it and wrap around your component.

Man 2: [20:03] Cool, thank you.

Laurie: [20:04] Yeah, no problem. I actually have not used this feature a whole lot, because in most cases I find that with lifecycle hooks and other stuff, you don't need to worry about lazy loading as much, because Vue is pretty performant on its own. If you get into really extensive applications, it's absolutely something that you might see used.

[20:28] I know people who are building enterprise level apps are using it quite a bit. Asking me about keywords I never use, cheating. I know they're a thing, I just don't touch them most of the time. I haven't had the need to. Anybody else? Lucas, how we doing? Yeah, OK. "I see that this workshop is recorded, can we have a copy of it?" This workshop is recorded, but it's recorded for me.

[21:12] I'm going to go and review all of this in order to make the videos. The videos will eventually be available on Egghead and will be the same content that we discussed today. The recording won't be available for everybody else, but there will be a different more polished recording that's a little more straight to the point, because that's what we do.

[21:40] This is basically my trial cake that nobody sees. That I throw in the bin and then I make a nice, pretty one that's presented and everyone thinks I did it right the first time. "Trial cakes don't get thrown in the bin." Sure, they get eaten, but they don't get presented to people, Brian.

[22:06] Also, I've been watching too much Great British baking show, so I said "the bin" instead of "the trash." Anybody else? Cool. I will stay on to make sure we get Lucas' error figured out. To everybody else, I really appreciate you joining in.

[22:32] If you have any feedback, please, please send it my way. I want to make sure that the videos that live on forever are encompassing the information that people need and want to see on this topic. I really appreciate your time in the middle of a Tuesday afternoon or morning, depending on which coast you are on.

[22:51] Thanks, everybody. "How can we get ahold of you?" Twitter. Just DM me. They're open. Ian put it in Slack. Laurie On Tech. I figured 99 percent of you found out about this from my Twitter, anyway, or Veni's Twitter, which is also possible.

[23:14] Twitter is the best, until it's the worst. Tyler's making fun of all of the random hello messages that I get from weird people. Any feedback you have, anything else you want to tell me about that is awesome. Again, I really appreciate all of your time. Lucas, how are we doing? No. Zack, Ian, do you know if I can give him control, so he can share his screen?

Man 1: [23:53] I think this is a regular meeting, so he should be able to.

Laurie: [23:57] Cool. If I stop sharing, Lucas, can you share, so we can see what you see? Yea.

Lucas: [24:08] OK, cool. This is Lucas, by the way.

Laurie: [24:12] Nice to meet you.

Lucas: [24:13] Nice to meet you, too.

Laurie: [24:17] What are we seeing? What's our error on our right-hand side? Path is required and a route config. In evalindex.js. In your Chrome Inspector, the third to the last one, that's actually the index.js, can you click on that? That at eval index, can you click on that link down? Down, down.

Lucas: [24:48] This one?

Laurie: [24:48] No, down. The one that says, "Index." One more. One more. You're almost there.

Lucas: [24:56] This one?

Laurie: [24:57] That one.

Lucas: [25:00] Got it.

Laurie: [25:00] Can we see that a little bit?

Lucas: [25:03] Do this.

Laurie: [25:07] Interesting. It's somewhere in your index file. It didn't take us to an exact thing, which I didn't expect. That's fine.

Man 2: [25:21] I spy some curly braces around the spread object.

Lucas: [25:25] What?

Laurie: [25:26] Yep. You don't want curly braces around your spread operator, because that's casting it to a new object, which is going to make it an object within an object. It's going to be looking for a key called path, and it won't exist. Using the curly braces, this is literally just casting it to a new array inside. This should fix your problem. Introducing spread operator as just a throwaway thing was a little unfair.

Lucas: [25:58] Got it.

Laurie: [25:59] I acknowledge that.

Lucas: [26:00] I'm still learning about spread operators. It's a newer thing for me.

Laurie: [26:04] I will send you a post on it that I also wrote.

Lucas: [26:07] That'd be awesome.

Laurie: [26:09] Hold on. For some reason, it's weirdly popular. People really like this post. Here you go. "You need to learn more about spread operators." Love it. You don't have to share. We don't have to see all your notes. I feel bad about that.

Lucas: [26:25] Are you kidding me? You're going to see these notes, just so you know. I do work at ACAT.

Laurie: [26:30] You're a Stealth person. Sorry, I don't know these things.

Lucas: [26:33] Yes, I am one of those guys.

Laurie: [26:35] I don't know these things. Do we only have Egghead people left? Tyler and Brian are still on. I don't know if Isabel is an Egghead person or not. I don't know who the Stealth people are. This is the whole point, which is a little bit stressful, I'm not going to lie.

[26:52] Isabel is not either. Isabel and Brian, did you get all your questions answered? Isabel, that makes me really happy. Yea. Awesome. That makes me really happy. I'm so glad you all enjoyed it. If you want to sign off, I'm going to get just a couple of conversations with the Egghead people. It was nice to interact with all of you. Thank you.

Course

Live Workshop Recording

Vue Router Live Workshop 2019-10-22 Part 3

Share this video with your friends