Quick Start with Laravel + 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:

Want to move faster? Try our tool to generate Laravel adminpanel without a line of code!
Go to QuickAdminPanel.com

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.


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!

Check out my new online course: Creating Invoices with Laravel 5.6