Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel

Free Preview: Code a Single-Page App With Laravel and Vue.js

Introduction

01:24
  • Overview
  • Transcript

Web users like single-page applications because they are more fluid and responsive. If you want to add more responsiveness and interactivity to your Laravel app, you might want to code it as a single-page app using a front-end web framework like Vue.js. This is a cutting-edge JavaScript framework that makes it easy to code web apps, and it is a favorite of the Laravel community.

In this course, Jeremy McPeak will teach you how to build a single-page app with a Laravel back-end. Along the way, you'll create a simple support ticket system, complete with routing, user authentication, and validation—all on the front-end.

Laravel and Vue.js work great together, and by the end of this course you'll have all the knowledge you need to combine Laravel with Vue to code single-page apps.

Learn Vue.js

Learn Vue.js with our complete Vue.js tutorial guide, whether you're a seasoned coder or a web designer looking to pick up new front-end development techniques.

1. Introduction

1.1 Introduction

So, you want to write a single page application and frankly, I can't blame you. SPAs are all the rage because they give users an experience that is very similar to conventional desktop applications. Building a SPA can be very daunting, but if you are a Laravel developer, well, you have everything you need to build a single page application. Hi, I'm Jeremy McPeak and I invite you to build a single page application with me. It's a simple ticket system written with Laravel and Vue.js. And we'll start completely from scratch. We'll start with the front end of the application. We'll build a ticket submission system that will allow people to submit and view support tickets. We'll build it step-by-step, focusing on one piece of the puzzle at a time. You'll learn how to write components that interact with the restful API, as well as how to use view router to navigate between different components. From there, we'll focus on the admin portal. We'll incorporate user authentication, so that only authenticated users can access not just the restful API, but the user interface running in the browser. And once again, we'll take it step-by-step, focusing on one piece at a time. Now we have a lot ground to cover, so when you're ready, queue up the next video and we will get started.

2. The Application's Front-End

2.1 Getting Started

Before we create and set up our project, I want to briefly want to go over what you need to follow along in this course. And chances are, you have everything already. But just to make sure, I want to give you just a little overview of the things that you'll need. So it goes without saying that because we are writing a Laravel application, you need Laravel. But because Laravel is a PHP framework, you then need a PHP development environment. And you can set up an environment in a variety of different ways. But the best way for Laravel applications is a tool called Homestead. So if you go to Laravel.com, click on Documentation. And this is going to take you to the installation instructions for Laravel itself, which is great, but without PHP and a web server and all of the other stuff, it's kind of useless. So scroll on down a little bit and you're going to see a link to Laravel Homestead. So click on that. And this is really where you want to start if you don't have anything on your machine, because this is going to give you everything that you need to write Laravel applications. And the great thing about Homestead is that it is a virtual machine. It is completely isolated from everything on your physical machine. So you don't have to install a web server or a database server, and have those running on your physical machine all the time. They are running inside of a virtual machine, so that's whenever you need those system resources you can shut down the virtual machine and you're good to go. So follow these instructions, if you don't have Homestead, I highly recommend that this is what you use for your environment. However, if you wanted to set up everything yourself, feel free to do that. Or there's another alternative, one that I am using called a MAMP. It gives you PHP, Apache, and MySQL, and a few other tools. Now the reason why I'm using MAMP is because what you see on screen is a virtual machine. And while I could run Homestead inside of this Virtual Machine, it would get a little muddy in some places, and I want to avoid that as much as possible. So if you are using Homestead things are going to be just a little bit different because I'm not using Homestead, I'm using MAMP. So after you have your PHP environment all set up the next thing that you need is Node.js. Now if you're not familiar with Node, this is a JavaScript runtime. That means that you can write applications with JavaScript. That can be web applications, they can also be desktop applications, as well. Node.js is a tremendously wonderful framework. However, we don't really care about that as far as our application is concerned. What we want from Node.js is a tool called node package manager, or npm. Because this has become the way that we manage all of our dependencies. Be it CSS, JavaScript, or things like that. So whenever you install Node.js, it doesn't matter what version. You can use the LTS, which is the long term support, or you can use what they refer to as the current version. It doesn't matter. Because all we are doing is installing Node for npm. And in that installation process, it is going to ask if you want to install npm. Now, it's checked by default. But make sure that it's checked, otherwise you're installing Node.js for no reason at all. Because we want npm. So once you have everything, then of course we just need to create our project. So let's do that. And since this is going to be for managing support tickets, I'm going to call this support-master. My first choice was Ticket Master, but you know, there could be some problems there as far as trademarks are concerned. So we're going to call this support-master. And this is, of course, going to create our project. Now, this is going to give us everything that we need. Not only are we going to get all of the Laravel stuff, but we're also going to get view JS as well. So this is going to give us a very good starting point. And if we need any other dependencies as far as JavaScript is concerned we will use npm. If we need any dependencies as far asour Laravel application then we will use Composer. So we have these two tools that we will then use to manage all of our dependencies. Now at the time of this recording, whenever you create a new Laravel Project it is using Bootstrap 3, which there's nothing wrong with that. But I want to use Bootstrap 4, because it is the latest and greatest, at least right now. So that means that we need to essentially replace some of the things within our project. And we can do that with this preset here. This essentially replaces all of the Bootstrap 3 stuff and puts in Bootstrap 4. And when I say that it replaces all of the Bootstrap 3 stuff, it replaces all of the Bootstrap 3 stuff. It touches everything that has anything to do with the CSS. So what we want to do is run this command here. So let's just go ahead and do that, and then once that is done you're going to run another command to actually do the replacing, if you will. Now, we have two options, we can just use the plain ordinary bootstrap4 here which is just going to give us the bare bones. Well, it's not really the bare bones but it gives us everything but the auth stuff. Well, let's just be complete and let's do all the auth stuff. Because there may be some things that we want to use from that whenever we implement our application. So we'll use that command as well. So once Composer is done bringing in this preset, we're going to run this other command. This can take a few minutes, depending upon, well, several factors. And when that finishes we want to run npm install to install all of our client side dependencies. Now this could take a while because there are a lot of packages and those packages have a lot of dependencies. But once that is done we just need to setup our environment, open up the .env file so that we can set this up. Now the DB settings are of course going to be different for your environment. For me, my DB port is 8889 everything else is okay except the database name which we need to create. I'm going to call this support_master. My user name is root, and my password is root. Yours, of course, is going to be different. But we need to create this database. And you can use whatever tool you want. If you want to go hardcore and use the command line, then more power to you. When it comes to working with the database, I want a graphical interface. So I am going to use a MySQL Workbench, which is freely available. You can go to, well, you can just Google it. MySQL Workbench and that will take you to the download page. So this is going to connect to my local SQL database. And I just want to create a new database. So we're going to call this support_master. We'll keep all of the defaults. And there we go, so we will have that database. And just about everythingelse we are going to use migrations for, we're not going to be inside of here manually creating tables or anything like that. We have Artisan to do that stuff, so we might as well use it. And we will get started with that in the next lesson.