Laravel Vue Tutorial 2022

is PHP’s fastest-growing Framework with its ease of use, scalability, and flexibility.
is the fastest growing Front end Library in the Javascript community.
is providing
support out of the box. So let us get up and running with the
Laravel VueJS tutorial.


Laravel 9 and Vue Tutorial

will walk through the exercise of how you can set up the development environment with each other, and we are creating a
Simple CRUD Application.


One possible reason I am writing this is to showcase how
Laravel PHP Framework
and modern client-side Javascript frameworks (Vue.js) can all play nicely together.


For learning Vue.js, I suggest this article
Vue Tutorial With Example. It will guide you to learn the fundamentals of Vue.js. If you want to know how a router works on Vue.js, check out this tutorial,
How To Use vue-router in VueJS.

Step 1: Create a project

Type the following command in your terminal.

composer create-project laravel/laravel laravelvuejstutorial --prefer-dist

After installing the project, go to the project folder and type the following command in your perhentian.

npm install

It will install all the JavaScript dependencies regarding
VueJS. In addition, it will install laravel-mix, which you can think of as a kind of module bundle like

Now, set up a database in MySQL, and also we need to configure it in Laravel. So in your project root, there is a
file, and in that file, you need to configure your username, DB name, and password. After configured, type the following command in your halte.

php artisan migrate

If you will navigate to
assets>>js  >>  components,you will see the
component is there, so basically, Laravel provides
support out of the box. However, we can use other
frameworks like
AngularJS. This component is required in the external JS file called
Laravel Mix will compile this file.

I have removed the comments provided by
Laravel so that the
app.jsfile will look like this.

// app.js  require('./bootstrap');  window.Vue = require('vue');  Vue.component('example', require('./components/Example.vue'));  const app = new Vue({     el: '#app' });

We need to install some other dependencies to run the
library smoothly, and also we need to use vue-router for routing our application.

npm install --save-dev vue-axios vue-loader vue-router vue-template-compiler

Step 2: Edit the default configuration.

We are going to change this file by the following code.

// app.js  import Vue from 'vue';  import VueRouter from 'vue-router'; Vue.use(VueRouter);  import VueAxios from 'vue-axios'; import axios from 'axios'; Vue.use(VueAxios, axios);  const router = new VueRouter({ mode: 'history'}); new Vue(Vue.util.extend({ router })).$mount('#app');

We have imported
vue-axios, andaxios
libraries for our application.

Created the router object and set the mode history to get rid of the pound (#) on every route.

Now, switch to
file and replace the following code with that file.

// welcome.blade.php  <!doctype html> <html lang="{{ app()->getLocale() }}">     <head>         <meta charset="utf-8">         <meta http-equiv="X-UA-Compatible" content="IE=edge">         <meta name="viewport" content="width=device-width, initial-scale=1">         <title>Laravel Vue CRUD Application</title>         <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">     </head>     <body>         <div id="app">         </div>          <script>            window.Laravel = <?php echo json_encode([                'csrfToken' => csrf_token(),                     ]); ?>           </script>         <script src="{{asset('js/app.js')}}"></script>     </body> </html>

We need to create one
directory and call this component an

// App.vue  <template>     <div class="container">         <div>             <transition name="fade">                 <router-view></router-view>             </transition>         </div>     </div> </template>  <style>     .fade-enter-active, .fade-leave-active {       transition: opacity .5s     }     .fade-enter, .fade-leave-active {       opacity: 0     } </style>  <script>      export default{     } </script>

This component will work as a container of our application when
of our
Vue application
change. According to that, different components will be rendered within the

Baca :   Cara Tukar Pemain Pes 2022 Mobile

We need to include this component into ourapp.jsfile and pass it to the Vue object while creating an instance.

// app.js  import App from './App.vue';  new Vue(Vue.util.extend({ router }, App)).$mount('#app');

Go to the halte and type the following command.

npm run watch

If you see any error, please first check if there is a dependency that needs to be installed in the first place.

Step 3: Create routes with vue-router for our application.

In the
file, we also include the
component because we will create routes for our application. So, first, create an array of routes in the

// app.js  const routes = [   {       name: 'Example',       path: '/',       component: Example   } ];  const router = new VueRouter({ gaya: 'history', routes: routes}); new Vue(Vue.util.extend({ router }, App)).$mount('#app');

Here, I have created an array of routes and passed them to the router object. So, your whole
file will look like this.

// app.js  import Vue from 'vue';  import VueRouter from 'vue-router'; Vue.use(VueRouter);  import VueAxios from 'vue-axios'; import axios from 'axios'; Vue.use(VueAxios, axios);  import App from './App.vue'; import Example from './components/Example.vue';  const routes = [   {       name: 'Example',       path: '/',       component: Example   } ];  const router = new VueRouter({ mode: 'history', routes: routes}); new Vue(Vue.util.extend({ router }, App)).$mount('#app');

Type the following command in your terminal if everything is set up correctly.

php artisan serve

It will mulai the server on port
8000. So in Chrome, switch to this URL:

Laravel and VueJS Tutorials

Step 4: Create Laravel Backend For Our Application.

The next step would be to move VueJS to Laravel and create a
for our project. We can use
routes or


routes and for this project, let us stick with
web routes, so we need to put all of our routes in the

First, we are going to perform
operations on items. So first, let us define the schema for it. Then we will create controllers and routes.

Go to your command line and type the following command. First, make sure that you are
the root of our project folder.

php artisan make:model Item -m

It will create two files.

  1. Model file.
  2. Migration file.

Go to the migration file in the
database>>migrations>>create_items_tableand copy the following code.

<?php  // create_items_table  use Illuminate\Support\Facades\Schema; use Illuminate\Database\Schema\Blueprint; use Illuminate\Database\Migrations\Migration;  class CreateItemsTable extends Migration {     /**      * Run the migrations.      *      * @return void      */     public function up()     {         Schema::create('items', function (Blueprint $table) {             $table->increments('id');             $table->string('name');             $table->integer('price');             $table->timestamps();         });     }      /**      * Reverse the migrations.      *      * @return void      */     public function down()     {         Schema::dropIfExists('items');     } }

Go to the terminal and type the following command.

php artisan migrate

It creates the items table in the database.

, one komplet file is created in the



Baca :   Surat Lamaran Bagian Admin

It is time to create one resource controller called
by typing the following command.

php artisan make:controller ItemController --resource

This ItemController contains all its methods of CRUD operations. But, first, we need to put the code in it. So, I am now putting the whole file with all the operations.

<?php  // ItemController.php  namespace App\Http\Controllers;  use Illuminate\Http\Request; use App\Item;  class ItemController extends Controller {     /**      * Display a listing of the resource.      *      * @return \Illuminate\Http\Response      */     public function index()     {         $items = Item::all();         return response()->json($items);     }      /**      * Show the form for creating a new resource.      *      * @return \Illuminate\Http\Response      */     public function create()     {         //     }      /**      * Store a newly created resource in storage.      *      * @param  \Illuminate\Http\Request  $request      * @return \Illuminate\Http\Response      */     public function store(Request $request)     {         $item = new Item([           'name' => $request->get('name'),           'price' => $request->get('price')         ]);         $item->save();         return response()->json('Successfully added');     }      /**      * Display the specified resource.      *      * @param  int  $id      * @return \Illuminate\Http\Response      */     public function show($id)     {         //     }      /**      * Show the form for editing the specified resource.      *      * @param  int  $id      * @return \Illuminate\Http\Response      */     public function edit($id)     {         $item = Item::find($id);         return response()->json($item);     }      /**      * Update the specified resource in storage.      *      * @param  \Illuminate\Http\Request  $request      * @param  int  $id      * @return \Illuminate\Http\Response      */     public function update(Request $request, $id)     {         $item = Item::find($id);         $item->name = $request->get('name');         $item->price = $request->get('price');         $item->save();          return response()->json('Successfully Updated');     }      /**      * Remove the specified resource from storage.      *      * @param  int  $id      * @return \Illuminate\Http\Response      */     public function destroy($id)     {       $item = Item::find($id);       $item->delete();        return response()->json('Successfully Deleted');     } }

We also need to create a protected
field in the
file; otherwise, a ‘mass assignment exception‘ will be thrown.

<?php  // Item.php  namespace App;  use Illuminate\Database\Eloquent\Model;  class Item extends Model {     protected $fillable = ['name', 'price']; }

The last step would be to register the routes in
routes >> web.php

<?php  /* |-------------------------------------------------------------------------- | Web Routes |-------------------------------------------------------------------------- | | Here is where you can register web routes for your application. These | routes are loaded by the RouteServiceProvider within a group which | contains the "web" middleware group. Now create something great! | */  Route::get('/', function () {  return view('welcome'); }); Route::resource('items', 'ItemController');

Step 5: Make three components and register with the App component.

All of our Backend is almost done. Now, if we switch to the front end in
Vue.js, we need to create three components, and then we include them in an
file to register the routes, and it is good to go.

Create following components inside

  1. CreateItem.vue
  2. EditItem.vue
  3. DisplayItem.vue
// CreateItem.vue  <template>   <div>     <h1>Create An Item</h1>     <form v-on:submit.prevent="addItem">       <div class="row">         <div class="col-md-6">           <div class="form-group">             <label>Item Name:</label>             <input type="text" class="form-control" v-model="">           </div>         </div>         </div>         <div class="row">           <div class="col-md-6">             <div class="form-group">               <stempel>Item Price:</tera>               <input type="text" class="form-control col-md-6" v-model="item.price" />             </div>           </div>         </div><br />         <div class="form-group">           <button class="btn btn-primary">Add Item</button>         </div>     </form>   </div> </template> <script>   export default {     data(){         return{           item:{}         }     },     methods: {       addItem(){         let uri = 'http://localhost:8000/items';, this.item).then((response) => {           this.$router.push({name: 'DisplayItem'})         })     }   } } </script>

Here, I have defined the template, a basic
creation form. Then, in Javascript, I have to define the item object and post method to post the data to the Laravel backend peladen.

Baca :   Tutorial Hantaran Handuk Kimono

This file must be included in the
app.jsfile to register the routes to see the form.

Okay, now create another component called
in the components folder.

// EditItem.vue  <template>     <div>         <h1>Items</h1>          <div class="row">           <div class="col-md-10"></div>           <div class="col-md-2">             <router-link :to="{ name: 'CreateItem' }" class="btn btn-primary">Create Item</router-link>           </div>         </div><br />          <table class="table table-hover">             <thead>             <tr>                 <td>ID</td>                 <td>Item Name</td>                 <td>Item Price</td>                 <td>Actions</td>             </tr>             </thead>              <tbody>                 <tr v-for="item in items">                     <td>{{ }}</td>                     <td>{{ }}</td>                     <td>{{ item.price }}</td>                     <td><router-link :to="{name: 'EditItem', params: { id: }}" class="btn btn-primary">Edit</router-link></td>                     <td><button class="btn btn-danger" v-on:click="deleteItem(">Delete</button></td>                 </tr>             </tbody>         </table>     </div> </template>  <script>      export default {         data(){             return{                 items: []             }         },          created: function()         {             this.fetchItems();         },          methods: {             fetchItems()             {               let plasenta = 'http://localhost:8000/items';               this.axios.get(tembuni).then((response) => {                   this.items =;               });             },             deleteItem(id)             {               let uri = `http://localhost:8000/items/${id}`;               this.items.splice(id, 1);               this.axios.delete(ari-ari);             }         }     } </script>

Here, I have written the component that displays the items in a tabular form, and also, I have defined two other buttons one is for
and the other is

We also need to create the third and final component called

// EditItem.vue  <template>     <div>         <h1>Update Item</h1>         <div class="row">           <div class="col-md-10"></div>           <div class="col-md-2"><router-link :to="{ name: 'DisplayItem' }" class="btn btn-success">Return to Items</router-link></div>         </div>          <form v-on:submit.prevent="updateItem">             <div class="form-group">                 <label>Item Name</etiket>                 <input type="text" class="form-control" v-sempurna="">             </div>              <div class="form-group">                 <label name="product_price">Item Price</label>                 <input type="text" class="form-control" v-model="item.price">             </div>              <div class="form-group">                 <button class="btn btn-primary">Update</button>             </div>         </form>     </div> </template>  <script>      export default{         data(){             return{                 item:{}             }         },          created: function(){             this.getItem();         },          methods: {             getItem()             {               let uri = `http://localhost:8000/items/${this.$}/edit`;                 this.axios.get(tali pusar).then((response) => {                     this.item =;                 });             },              updateItem()             {               let tembuni = 'http://localhost:8000/items/'+this.$;                 this.axios.patch(uri, this.item).then((response) => {                   this.$router.push({name: 'DisplayItem'});                 });             }         }     } </script>

Here, I have defined the Update function with its POST request.

The last step is to include all these components into the

We can now remove
component, as we do not need it anymore.

// app.js  import Vue from 'vue';  import VueRouter from 'vue-router'; Vue.use(VueRouter);  import VueAxios from 'vue-axios'; import axios from 'axios'; Vue.use(VueAxios, axios);  import App from './App.vue'; import CreateItem from './components/CreateItem.vue'; import DisplayItem from './components/DisplayItem.vue'; import EditItem from './components/EditItem.vue';  const routes = [   {     name: 'CreateItem',     path: '/items/create',     component: CreateItem   },   {         name: 'DisplayItem',         path: '/',         component: DisplayItem   },   {       name: 'EditItem',       path: '/edit/:id',       component: EditItem    } ];  const router = new VueRouter({ mode: 'history', routes: routes}); new Vue(Vue.util.extend({ router }, App)).$mount('#app');

Finally, go to

VueJS and Laravel Tutorials

If you have any data, the home screen will look like this if you click on the
Create Item

Laravel and VueJS CRUD

If you click on the
button, this will be your page.

Laravel 5.4 and VueJS 2.0 Tutorials

Download Project On Github


  1. Clone the repo.
  2. Run this command:
    composer update.
  3. Then, run this command to install
    npm install
  4. Create a.env
    file and config the database.
  5. Run this command:
    php artisan migrate.

  6. Then run this command:
    npm run dev.
  7. Next, type this command:
    php artisan serve.It will start the peladen at this URL:

That’s it for the
Laravel Vue Les.

Laravel Vue Tutorial 2022


Check Also

Harga Lovebird Violet Df

Harga Lovebird Violet Df Harga Lovebird Violet – Mana tahu cak bagi sebagian orang nan …