quick-start

Quick Start with Laravel 5.5 + Vue.js: Simple CRUD Project

Vue.js is getting more and more popular, and good thing about it that it’s pretty quick to get started with. Let me show you an example in this tutorial and sample project.


What we’re building here

laravel vue.js crud

This is our sample project – one CRUD (Create/Read/Update/Delete) for managing companies.

We will first build a core Laravel project and then add Vue.js logic.


TL;DR version
If you prefer to just check code: GitHub repository
If you prefer video over text: YouTube video (8 minutes)


Phase 1: Typical Laravel project

This is a pretty simple phase.

Step 1. Create a Laravel project with laravel new or composer create-project command, whatever you prefer.

Step 2. Launch php artisan make:auth command to have a typical Bootstrap.

Step 3. Copy resources/views/auth/login.blade file into a new template which would represent companies list – I called it resources/views/admin/companies/index.blade.php – and delete all the internal code, for now:


Phase 2. Database layer and API

Next step – is to take care of managing our CRUD.

Step 1. Model and database. Launch this:

It will create a file app/Company.php which you would fill with this:

And same fields in a migration file that has been generated:

Now, let’s create a Controller that will manage all CRUD operations. But it won’t be a simple make:controller command – we have to save it as API thing, something like this:

Laravel API Controller

So command would look like this – with full path:

And we fill it with a typical CRUD operation list:

Finally, we need to take care of the routing – in our routes/api.php file:

As you can see, I’m adding a prefix api. and excluding create/edit methods cause they don’t make sense without visual forms for API.

Important notice: for this tutorial, I didn’t build any authentication mechanism for the API, in real life you should protect your routes with some middleware or Laravel Passport. Actually, we have a separate tutorial and demo-project for that.

Ok, we should be done with API layer by now, you can try it with Postman or some other client. Now, let’s get (finally!) to Vue.js layer.


Phase 3: Start with Vue.js

To begin coding Vue.js in Laravel, you actually don’t need to install it, it’s already there, look at the file resources/assets/js/app.js:

Basically, all it does for now is attaching a new Vue application to a selector with id=”app”, which is generated by make:auth (see steps above) and is located in resources/views/layouts/app.blade.php:

Now, what we actually need from Vue is only one core thing called Vue-router. Let’s run this command from the main folder:

Next thing we do is compile the basic Vue.js file. To do so, we need to run following command:

It will compile resources/assets/js/app.js file into public/js/app.js, which is also generated by make:auth – look at the bottom of layouts/app.blade.php:

npm run watch will also launch a “watcher” which will compile files as we change them.


Phase 4: Vue-router and Index/List Component

Next step is to actually use Vue-router and assign it to different views in CRUD.

First, let’s open our resources/views/admin/companies/index.blade.php file and load the router:

See the lines with router-view? That’s exactly where the companiesIndex will be loaded. Now, let’s creat it.

Open file resources/assets/js/app.js and put these contents – below I will explain each part:

You can look up Vue documentation on how Router works in general, but what we’ve done here, basically, is attaching every route we need to some Vue component – like CompaniesIndex, CompaniesCreate and CompaniesEdit.

Now, let’s create them – here’s a file resources/assets/js/components/companies/CompaniesIndex.vue:

Looks familiar, doesn’t it? Same table that would appear in index.blade.php with just some Vue.js flavour.

  • Line with <router-link :to=”{name: ‘createCompany’}”> creates a link to the component which would load without reloading the whole page;
  • Table row <tr v-for=”company, index in companies”> will load the data and show each field there;
  • Data for the table comes from API (remember, we’ve created it) via JS at the bottom: axios.get(‘/api/v1/companies’) -> app.companies = resp.data;
  • There’s also an event for Delete button, which also calls API delete method axios.delete(‘/api/v1/companies/’ + id) and reloads the table (but not the page)

Basically, that’s it for the list of companies! It will load empty table and then fill it in with the data from the API.


Final Phase 5: Create/Edit Vue components

Now you know what are Vue components and how to attach them to URLs via VueRouter. Let’s finish our demo-project with create and edit forms which will be pretty similar.

resources/assets/js/components/companies/CompaniesCreate.vue:

What you can see here?

  • Same <template> tag for the main content and <script> for the JS part;
  • Assigning input fields to their model fields: input type=”text” v-model=”company.name”
  • Form with submit event v-on:submit=”saveForm()” and method defined by calling API: axios.post(‘/api/v1/companies’, newCompany)

And that’s it, after submitting the form Vue.js will reload main table, but again – without reloading whole page.

Finally, Edit file resources/assets/js/components/companies/CompaniesEdit.vue looks really similar, I will show only JS part:

So, that’s it, you can try the project out – it’s available on GitHub.

Or, if you prefer a video version, here it is:

Good luck with Vue.js!

Liked the article? Maybe you need help with your Laravel project?
Check out my Upwork profile and hire me!

13 thoughts on “Quick Start with Laravel 5.5 + Vue.js: Simple CRUD Project

  1. Copy resources/views/auth/login.blade file into a new template which would represent companies list – I called it resources/views/companies/index.blade.php

    it suppose to be resources/views/companies/admin/index.blade.php you need to edit that

  2. Would you have any advice on how to do this with a Laravel/Spark integration?

    I’ve gone over it a bunch of times and can’t figure out the difference in how things are handled.

    1. Thanks for question, Jim.
      I don’t think it can be done with Laravel Spark *integration*, from what I understand Spark is the base of the project, and then you add your code on top. But it’s a big topic which cannot be handled in one comment, sorry.

      1. No worries. I got it down to a problem with the Axios request returning NULL, even though if I log it to the console it shows the correct data.

        I really appreciate you taking the time to put this up – thank you!

        1. Well – it has nothing to do with Spark. For some reason it’s trying to render before the data is loaded…and giving me a NULL response. Looking forever for some answer to this but can’t figure it out.

  3. Povilas Korop ty for gr8 tutorial. Right now i am trying to implement it on my project and i get this error. [Vue warn]: Property or method “employees” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
    I cant render datas from my table in Database. Error is connecte with thoose two files index.blade.php and CompaniesIndex.vue . Thank you in advance, i am just beginner and this is my very first project.

Leave a Reply

Your email address will not be published. Required fields are marked *