Building A Vue Front End For A Laravel API

Building A Vue Front End For A Laravel API

The previous article had us building a JSON Rest API using the Laravel Framework. In this tutorial, we’ll use Vuejs to build a front end which can consume the API we have in place. Instead of rendering blade files, we can use Vue components and AJAX to simply fetch the data we need to display from the API. We’ll even learn a little bit about customizing the CSS in Laravel using SCSS and Laravel Mix.


Installing Dependencies

To kick things off we need to install the dependencies specified in the package.json file of our Laravel instance. To do this just run npm install in the project root like so.
npm install laravel dependencies
This will download and install all of the software needed for the front end side of development.


Laravel Mix

Laravel Mix is one of the dependencies that is now installed. Webpack is really hard. Laravel Mix makes it easier. With Mix and SCSS we can quickly change the look of the site. Before running Mix, we need to understand what it is going to do for us. So by default, Mix follows the logic found in webpack.mix.js which is in the root directory of a Laravel project.

What does this mean however? Well, when you run npm run dev for example, Mix is going to look at the contents of resources/js/app.js and resources/sass/app.scss. It will then compile these raw assets into usable code placed in public/js and public/css.


How Do I Customize My Styles?

Let’s say you want to try the cool Minty Bootswatch theme on a Laravel Project. How can we do that with Mix? Very easy! Download the _variables.scss file from Bootswatch site and replace the one found in /resources/sass/_variables.scss. Now we see the original and the new file.

Original _variables.scss

Minty version _variables.scss

This file sets values for all of these variables giving Bootstrap an entirely new look. Now we can modify the welcome.blade.php file like so just for a test. We want to test different Bootstrap classes to see if the new effect has taken place.


Run Mix

We can now run mix with npm run dev and there should be a result similar to this.
done compiled successfully

Note: If you run into errors when running mix, see this post which should help.

Now instead of the standard splash screen, we see the new styles applied. Cool!
laravel mix bootswatch minty


Building A Vue Front End

With that little bit of setup and configuration out of the way, we can now start building out the Vue Front end for our API. Just a couple of components might be good for this. We’ll have a simple Navbar component Component and a PostList Component. To start, we’ll just scaffold things out then add dynamic data as we go.


welcome.blade.php

Laravel is still going to load this view file as the home page. On that home page, is a div with the id of “app”. Our Vue application will attach or mount itself to that div. Here is the beginnings of that file.

Note the inclusion of the csrf_token fields. Without those you will get errors of “CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token” in the console so be sure to include those lines of code.


Adding A Navbar Component

You’ll notice that on line 13 above there is a reference to a <navbar> component. We need to build and register that component in order for it to display. We can navigate to the resources/js/components directory and create a Navbar.vue file. This file has a special .vue extension which means a couple of things. The first is that it is a Vue single file component. These types of files allow you to put the template, script, and even custom css in the same file. You then build the file via Webpack (in this case Laravel Mix), and you get a working result. Pretty cool!

resources/js/components/Navbar.vue

Now, we register the component in resources/js/app.js.

resources/js/app.js

As long as you have set up Laravel Mix to watch your files now by either running npm run watch or npm run watch-poll, then you should be able to visit the homepage and see a Minty Navbar.
bootswatch minty navbar


Listing The Posts

To list some some posts, we can add a new component named PostList.vue in resources/js/components. So first off, go ahead and add that file like we see here.
post vue component in laravel

The new component needs to be registered in the app.js file.

resources/js/app.js

Now in the PostList.vue file, we need to populate the template and script areas. We make use of the created Lifecycle Hook. This function is automatically called right after the instance for the component has been created. This is right before the component is mounted into the page, so its a perfect time to fetch the data from the API that we’ll need using the JavaScript Fetch api.

resources/js/components/PostList.vue

In the code above the posts array on line 16 is what will hold the api response containing all the posts. This is populated when the page loads and the created() hook runs. When that happens the getPosts() function is called which is what fetches the data from the api and assigns it to the posts variable. With the data in place, the template section uses your standard Vue v-for to create a list of posts.
laravel api response displayed with vue


Adding A Paginator

We got 5 posts to successfully display above, and it looks pretty cool! Recall that our API does provide information about the previous, next, and current links. This means you can use that data to create a paginator. The highlighted lines below show the additions to display the paginator.

This results in the paginator being displayed which tells us what page we are on and dynamically enables or disables the previous and next buttons based on where in the set we are located.


Add A Post

Let’s add a form to the page so a post can be added by sending a POST request to the API. On the back end, we’ll first change the pagination to 3 per page to give us some more room.

Now we have the ability to add a new post which is great 🙂


Delete A Post

To delete a post we can add a new function to the methods object named deletePost(). It accepts the id of the post to delete, then makes an ajax delete request to the api. The highlights below show the new code to allow for deleting a post.

When a post is deleted, the page automatically refreshes.


Update A Post

We can add a new button to each post which will give the option to update that post. This will be a kind of two step process. The first step is to click the update button to load the post data into the form. Then we can make changes to the data in the form, and finally click save. That means the addPost() function will need new logic to account for that. First though, let’s see how to add the button to allow updating by loading the right data into the form.

Depending on which post you click the update button for, that data is loaded into the form so we can take action on it. So if you wanted to update post 2, you can click that particular update button, change the data, then save.


Modify The addPost() Function

In the section just above, clicking on the update button for a given post loads up the data for that post into the form. Clicking on Save for the form however would currently create a new post, not update the one just loaded into the form. We can use some conditional logic in the addPost() function to fix this. We can also add a clearForm() function for two purposes. The first is to allow the user to clear out the form if they decide not to do an update, and secondly to automatically clear the form once a new post is added.

So for the final result we can do the full create, read, update, and delete of Posts using Vue on the front end and Laravel on the back end.


Learn More


Building A Vue Front End For A Laravel API Summary

With that, we now have a Vue front end for the Laravel API Resource we had built in the prior tutorial. We built this right inside of Laravel using the Mix tool to enable a build process which compiled the .vue files to production ready JavaScript.