js 3. Nothing is more exciting to me than putting together two technologies that are just a pleasure to use. js. js at a Liricon, which is Laravel's official conference, I have loved to work with these two technologies together.
So, first of all, what is Laravel? Well, Laravel is a popular PHP framework. You can see here from this screenshot of their GitHub repository that the repo is currently sitting at over 72,000 stars. And there's good reason for this.
Laravel is a breeze to use. It has a ton of features. and the community is just awesome. It's used by major companies like Twitch, like the New York Times, Disney, WB, St.
Jude's Children's Research Hospital, and a whole lot of others. There are a lot of different ways you can use Laravel. One of them is to create server-rendered apps with PHP. However, it can also be used to create what's known as the modern monolith.
with a JavaScript package called Inertia. Inertia allows you to create a single page view application, but using classic server-side routing. You can think of this approach as a mixture between a server-rendered app and an SPA. Here on the Inertia website, you can see how this works.
If you're familiar with Laravel already, then the controller here looks familiar. It's returning the data for the active users, and the way it's returning it is via this inertia class. vue file, a user prop accepts the user passed from the server. This is another approach to working with Laravel.
However, Laravel is also great for creating REST APIs, and REST APIs pair quite nicely with SPAs. js are a perfect fit together. And this is the approach we're going to be taking in this course. We're going to be building a REST API with Laravel and an SPA with Vue.
Well, actually more specifically with Nuxt, but that's really just so we can have some of the conveniences that Nuxt provides. What is it that we're going to be building during this course? ly or other popular URL shortener services you might be familiar with. Inside of the app, you can pass in the full link to some URL, and then a short link will be spit out.
Now, ours are just going to run on local host, but of course, this could be a very short domain name where your app is hosted. And then ultimately, you could have these very short links. Let's hop out of the slideshow real quick and let me show you a live version of what it's going to look like. All right, here's that same thing.
And as you can see, we're going to be able to search through our different links. We'll be able to sort them alphabetically. We'll also be able to sort them by views. So how often the link has been clicked.
Of course, we'll be able to perform all those different CRUD operations that are so common in most apps. Things like editing each of the links, deleting them, or creating new ones altogether. And we'll also make sure all of our forms have proper validation in place so that we can't submit invalid data. We'll also learn how to quickly support pagination for our different resource tables.
Well, for us, that is the links. And finally, of course, we'll be able to associate particular links with particular users and let users log in and out of the application in order to see their links. Awesome. So that's what we're going to build.
Let's head back over to the slides and then answer the question, what will I learn during this course? After all, that's why you're all here. Well, we will learn how to authenticate users. That is, you'll be able to log in, log out, register, and all of this will be powered by both the Laravel Fortify package as well as the Laravel Sanctum package.
These will work together to perform our authentication solution. We'll also learn how to intuitively run CRUD operations against our Laravel-powered API. js, most specifically with the Composition API. We'll also learn how to support simple sorting, filtering, and searching, just as you saw a moment ago in the actual app.
This is powered by the amazing Laravel Query Builder package from SpadyBee. Spady is an awesome open source contributor, and they have a ton. I don't even know if I could count how many open source packages they have available for Laravel, but in my opinion this is one of the top ones. We'll learn how to display server-side validation errors in line on our form fields.
This means we can display timely and relevant error messages to our users without having to double up our validation efforts by writing validation both on the client side and on the server side. We'll learn a little bit of Nuxt and a little bit of TypeScript as we go through the course. js SPA, but we'll also get to take advantage of some of the conveniences that Nuxt provides, like auto-importing composable functions, components, and so on, including TypeScript will help us make our application type safe and help us better catch errors as we're developing. If you aren't familiar with TypeScript already, don't worry about it at all.
I'll explain all of the TypeScript that we write thoroughly. And I think this course can be enjoyed by JavaScript pros and TypeScript enthusiasts alike. Finally, there'll be plenty more tips and tricks, many of which will be specific to Laravel in Vue. So now that you know what Laravel is, what we're building in this course, what you're going to learn in this course, let's finally answer the question, who is this course for?
I think we can group the audience into three categories. js 3 with Laravel. js 3 on the frontend. but they want to learn best how to make them work together.
js but may not be as familiar with Laravel. However, maybe the backend that they're interacting with at their job is written with Laravel and maintained by the company's backend developers. This course will help that frontend dev better interact with that backend. Just to note, even though you will have to download and run a Laravel application on your local machine, all the actual PHP code will be written for you.
We will go over the PHP code that is written at a high level when it comes to showing how the server is responding to the request from the client side, but you will not have to write any PHP yourself. The third person I think this course can be for is even Laravel newbies who want to get more into Laravel. js, but they really want a nice introduction on how Laravel works as a REST API. I think this course will be great for those as well.
So with that, let's get started building our Laravel and Vue powered app. js 3. Nothing is more exciting to me than putting together two technologies that are just a pleasure to use. js.
js at a Liricon, which is Laravel's official conference, I have loved to work with these two technologies together. So, first of all, what is Laravel? Well, Laravel is a popular PHP framework. You can see here from this screenshot of their GitHub repository that the repo is currently sitting at over 72,000 stars.
And there's good reason for this. Laravel is a breeze to use. It has a ton of features. and the community is just awesome.
It's used by major companies like Twitch, like the New York Times, Disney, WB, St. Jude's Children's Research Hospital, and a whole lot of others. There are a lot of different ways you can use Laravel. One of them is to create server-rendered apps with PHP.
However, it can also be used to create what's known as the modern monolith. with a JavaScript package called Inertia. Inertia allows you to create a single page view application, but using classic server-side routing. You can think of this approach as a mixture between a server-rendered app and an SPA.
Here on the Inertia website, you can see how this works. If you're familiar with Laravel already, then the controller here looks familiar. It's returning the data for the active users, and the way it's returning it is via this inertia class. vue file, a user prop accepts the user passed from the server.
This is another approach to working with Laravel. However, Laravel is also great for creating REST APIs, and REST APIs pair quite nicely with SPAs. js are a perfect fit together. And this is the approach we're going to be taking in this course.
We're going to be building a REST API with Laravel and an SPA with Vue. Well, actually more specifically with Nuxt, but that's really just so we can have some of the conveniences that Nuxt provides. What is it that we're going to be building during this course? ly or other popular URL shortener services you might be familiar with.
Inside of the app, you can pass in the full link to some URL, and then a short link will be spit out. Now, ours are just going to run on local host, but of course, this could be a very short domain name where your app is hosted. And then ultimately, you could have these very short links. Let's hop out of the slideshow real quick and let me show you a live version of what it's going to look like.
All right, here's that same thing. And as you can see, we're going to be able to search through our different links. We'll be able to sort them alphabetically. We'll also be able to sort them by views.
So how often the link has been clicked. Of course, we'll be able to perform all those different CRUD operations that are so common in most apps. Things like editing each of the links, deleting them, or creating new ones altogether. And we'll also make sure all of our forms have proper validation in place so that we can't submit invalid data.
We'll also learn how to quickly support pagination for our different resource tables. Well, for us, that is the links. And finally, of course, we'll be able to associate particular links with particular users and let users log in and out of the application in order to see their links. Awesome.
So that's what we're going to build. Let's head back over to the slides and then answer the question, what will I learn during this course? After all, that's why you're all here. Well, we will learn how to authenticate users.
That is, you'll be able to log in, log out, register, and all of this will be powered by both the Laravel Fortify package as well as the Laravel Sanctum package. These will work together to perform our authentication solution. We'll also learn how to intuitively run CRUD operations against our Laravel-powered API. js, most specifically with the Composition API.
We'll also learn how to support simple sorting, filtering, and searching, just as you saw a moment ago in the actual app. This is powered by the amazing Laravel Query Builder package from SpadyBee. Spady is an awesome open source contributor, and they have a ton. I don't even know if I could count how many open source packages they have available for Laravel, but in my opinion this is one of the top ones.
We'll learn how to display server-side validation errors in line on our form fields. This means we can display timely and relevant error messages to our users without having to double up our validation efforts by writing validation both on the client side and on the server side. We'll learn a little bit of Nuxt and a little bit of TypeScript as we go through the course. js SPA, but we'll also get to take advantage of some of the conveniences that Nuxt provides, like auto-importing composable functions, components, and so on, including TypeScript will help us make our application type safe and help us better catch errors as we're developing.
If you aren't familiar with TypeScript already, don't worry about it at all. I'll explain all of the TypeScript that we write thoroughly. And I think this course can be enjoyed by JavaScript pros and TypeScript enthusiasts alike. Finally, there'll be plenty more tips and tricks, many of which will be specific to Laravel in Vue.
So now that you know what Laravel is, what we're building in this course, what you're going to learn in this course, let's finally answer the question, who is this course for? I think we can group the audience into three categories. js 3 with Laravel. js 3 on the frontend.
but they want to learn best how to make them work together. js but may not be as familiar with Laravel. However, maybe the backend that they're interacting with at their job is written with Laravel and maintained by the company's backend developers. This course will help that frontend dev better interact with that backend.
Just to note, even though you will have to download and run a Laravel application on your local machine, all the actual PHP code will be written for you. We will go over the PHP code that is written at a high level when it comes to showing how the server is responding to the request from the client side, but you will not have to write any PHP yourself. The third person I think this course can be for is even Laravel newbies who want to get more into Laravel. js, but they really want a nice introduction on how Laravel works as a REST API.
I think this course will be great for those as well. So with that, let's get started building our Laravel and Vue powered app.