Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
FREELessons:16Length:2.1 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.6 Adding Layout and Navigation

One of the defining features of a single-page application is seamless navigation. With Vue.js, we don't navigate to pages—we navigate to components. We'll set up navigation with the Vue Router in this lesson.

2.6 Adding Layout and Navigation

When it comes to designing the UI and the layout of an application, I tend to look at to other resources because I am horrible when it come to design. And anytime I'm going to use Bootstrap, the startbootstrap.com is really the first place that I go because they have a lot of free themes, or free layouts, and they are very well done. So, if you go to startbootstrap.com, click on View All Themes & Templates, and scroll down a little bit to this Scrolling Nav. This is what I used as a basis for what we are going to be using in this course. In fact, we are going to be using the Nav and then this section with About this page. We aren't going to have this header there. So the mark-up is going to be [LAUGH] very much the same as what we would find in this template. So if you wanted to start absolutely from scratch, or use whatever theme or template that you want to use, feel free to do so. But I just wanted to point out where I got my inspiration. So we are going to create a component that is going to serve as the layout for our application, so you can think of it as a layout page for our blade views, if we were going to be writing views. So let's start by creating a component, and we'll just call it App.vue, because the idea is that this is going to be the main component within our application. So let's create a new file, we'll call it App.vue. And I am just going to paste in the mark up because, really, you do not want to see me type all of this. So it is very straightforward, and as I mentioned, it is pretty much going to be the exact same as the template from Start Bootstrap. The only difference here is that I've changed the text of the links, and then there is this section here. Now I did add this id of body-content because our content is going to go inside of this div element. So we can add some place folder text, Content goes here. And we need to add some CSS so that this section element will clear the Nav, because right now it won't. So let's go to our sass folder, and let's create a new file called layout.scss. And the only thing that we are going to add a rule for the body content, and we're going to add some padding to the top. And a 154 pixels is going to be enough, and then let's add a 100, and that's all that we need to do there. Now we do need to import that inside of our app.scss, so we will just add another import layout, and we are good to go there. So now that we have this app component, we need to add it to our app.js file. I'm going to do that before our SubmitTicketFormComponent because when it doesn't matter the order in which you import things, I like to do things in the order of importance. So that Vue is of course the most important thing that we bring in, VeeValidate is arguably the next important, and then our components. So as far as the name here, this is of course going to be App. And we are also going to render App here. So that's, we are no longer going to just render our submit ticket form. So if we go to the browser and refresh, we should see our new layout, and we do. Now of course I was running the watch there, so you do need to make sure that that is running. And with saying that, I'm going stop that because now we are going to pull in the view router, so that we can navigate between different pages, and really our different pages are going to be different components. So we will say npm install vue-router, and we will save it as a dependency. And we will let that get started, so that we can go back to our code, and we want to import the router. So Vue is the most important to me, VueRouter is the next important, so we will put that as the second one. Feel free to do it in whatever order that you want to. And we do need to use the router as well, just like we did VeeValidate, so we will add another call to use. And by now vue-router should be finished installing. It is, so we will run the watch once again, so that that is running. And now we want to define our routes. Now our routes are just like the routes that we would use for our Laravel application. So the routing is going to route, it's not really requests. They are navigation events, I guess we could call them, to route us to different components. So let's create a variable, called routes, and this will be an array, and each item in the array is going to be an object where we have a path. And in this case, we might want to change this at a future time, but we'll say that if the path is createticket, then that is going to navigate to a component called SubmitTicketFormComponent, so we will use our component there. But then we need to create our router, so we will do that. And we need to new up the VueRouter constructor, and we're going to pass in the routes. Now notice here because this has been a problem for me. I would just pass in the routes without passing in an actual object that has routes as a property. Just be aware of that because it will not work, and I can tell you that from experience. So we are passing in the routes, and then we are going to inject the router into our vue instance as well. So we will say router, we will specify our element for injecting our application, and then we are rendering app. So now whenever we go to the browser, let's refresh the page, and we can see that the URL changes to a #/. And if we say createticket, we still see the same thing. Now the reason why is because we have set-up the router, but we haven't told it to where we want to display the components that we navigate to. So, we need to go to our App.vue, and we need to make a few changes. The first and probably the most important is this right here where we have our placeholder text. Well now we want to use an element called router-view, this is going to be where our components are going to display. So if we go back and refresh, we are going to see our create ticket form there. But let's also make a link, so that whenever we click on the Submit Ticket link, it will take us there. Now, we are going to use another special element called router-link, and with this element, we can use our bootstrap class of nav-link. And then we use an attribute called to, and then we specify the path that we want to go to. So that was createticket, and then the text will be Submit Ticket, and then we will have our link. So we can get rid of the actual a element there. Let's go back and refresh the page, and if we hover over Submit Ticket, in the bottom left-hand corner, we see the URL that we would expect. So, let's go back to the root of our application, and then let's click on the Submit Ticket link, and there we have our form. So now our application has a layout, and a better [LAUGH] user interface. In the next lesson, we want to display the ticket, so that if the user navigates to the appropriate URL, they will see the ticket that they created.

Back to the top