Vue Laravel CRUD: How to Create Vue Laravel Application

Last Updated On September 18, 2023 by Krunal

Here are the steps to create a Vue application with Laravel.

Step 1: Install Laravel boilerplate.

laravel new vuelaravelcrud

Go to the project folder and install frontend dependencies using the following command.

npm install

Open the project in your editor. I am using Visual Studio Code.

code .

Set up the database configuration inside the .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=vuecrud
DB_USERNAME=root
DB_PASSWORD=root

Save the file; now, your backend can connect to the MySQL database.

Start compiling assets using the following command.

npm run dev

We can also run the following command to compile the assets as you write the new code or modify the existing code.

npm run watch

Step 2: Install Vue dependency and edit configurations.

Type the following command to install the vue-router and vue-axios dependencies.

npm install vue-router vue-axios --save

We must change the app.js file inside the resources >> js folder.

Modify with the following code inside the app.js file.

// App.js

require('./bootstrap');

window.Vue = require('vue');

import VueRouter from 'vue-router';
Vue.use(VueRouter);

import VueAxios from 'vue-axios';
import axios from 'axios';
Vue.use(VueAxios, axios);

Vue.component('example-component', require('./components/ExampleComponent.vue'));

const router = new VueRouter({ mode: 'history'});
const app = new Vue(Vue.util.extend({ router })).$mount('#app');

Here, we have configured the vue-router and vue-axios libraries.

Inside the resources >> views folder, create the post.blade.php file.

Add the following code inside the post.blade.php file.

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
        <link href="{{ mix('css/app.css') }}" type="text/css" rel="stylesheet" />
        <meta name="csrf-token" value="{{ csrf_token() }}" />
    </head>
    <body>
        <div id="app">
          <example-component></example-component>
        </div>
        <script src="{{ mix('js/app.js') }}" type="text/javascript"></script>
    </body>
</html>

Change the route inside the routes >> web.php file. We are building a Single Page Application using Laravel and Vue.

Due to the following code, you can now use the Laravel route proxy as a Vue route and display the Vue components depending on the current URL.

<?php

Route::get('/{any}', function () {
  return view('post');
})->where('any', '.*');

Save the file and go to the browser and see the result. You can see that we have successfully integrated the Vue component into our Laravel application.

Step 3: Create Vue Components

Inside the resources >> js folder, create a folder called components; inside that folder, create four following vue components.

HomeComponent.vue
CreateComponent.vue
EditComponent.vue
IndexComponent.vue

// HomeComponent.vue

<template>
  <div class="row justify-content-center">
      <div class="col-md-8">
          <div class="card card-default">
              <div class="card-header">Home Component</div>

              <div class="card-body">
                  I'm the Home Component component.
              </div>
          </div>
      </div>
  </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

// CreateComponent.vue

<template>
  <div class="row justify-content-center">
      <div class="col-md-8">
          <div class="card card-default">
              <div class="card-header">Create Component</div>

              <div class="card-body">
                  I'm the Create Component component.
              </div>
          </div>
      </div>
  </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

// EditComponent.vue

<template>
  <div class="row justify-content-center">
      <div class="col-md-8">
          <div class="card card-default">
              <div class="card-header">Edit Component</div>

              <div class="card-body">
                  I'm an Edit component.
              </div>
          </div>
      </div>
  </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Example Component mounted.')
        }
    }
</script>

// IndexComponent.vue

<template>
  <div class="row justify-content-center">
      <div class="col-md-8">
          <div class="card card-default">
              <div class="card-header">Index Component</div>

              <div class="card-body">
                  I'm an Index component.
              </div>
          </div>
      </div>
  </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Index Component mounted.')
        }
    }
</script>

Step 4: Configure the vue-router

Inside the app.js file, write the following code.

// app.js

require('./bootstrap');

window.Vue = require('vue');

import VueRouter from 'vue-router';
Vue.use(VueRouter);

import VueAxios from 'vue-axios';
import axios from 'axios';

import App from './App.vue';
Vue.use(VueAxios, axios);

import HomeComponent from './components/HomeComponent.vue';
import CreateComponent from './components/CreateComponent.vue';
import IndexComponent from './components/IndexComponent.vue';
import EditComponent from './components/EditComponent.vue';

const routes = [
  {
      name: 'home',
      path: '/',
      component: HomeComponent
  },
  {
      name: 'create',
      path: '/create',
      component: CreateComponent
  },
  {
      name: 'posts',
      path: '/posts',
      component: IndexComponent
  },
  {
      name: 'edit',
      path: '/edit/:id',
      component: EditComponent
  }
];

const router = new VueRouter({ mode: 'history', routes: routes});
const app = new Vue(Vue.util.extend({ router }, App)).$mount('#app');

Here, we imported the four components and defined our application’s routes. Then we created a router object and passed it to our Vue application.

Add the following code to create one more vue component inside the resources >> js folder called App.vue.

// 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>

Here, we have defined our router- view. The directive will render the component according to the current URL. So, if our URL is /create, it will present the CreateComponent on the webpage.

Save the file, and if your npm run watch is not running, you might need to compile again and then go to the browser and go to these URLs for testing and see if the project is working.

http://vuelaravelcrud.test/create
http://vuelaravelcrud.test/posts
http://vuelaravelcrud.test/edit/21

If you are getting the specific component, you are lovely; if not, check out the error on the terminal and the console panel in the browser.

Step 5: Create a Navigation bar

// App.vue

<template>
  <div class="container">
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
      <ul class="navbar-nav">
        <li class="nav-item">
          <router-link to="/" class="nav-link">Home</router-link>
        </li>
        <li class="nav-item">
          <router-link to="/create" class="nav-link">Create Post</router-link>
        </li>
        <li class="nav-item">
          <router-link to="/posts" class="nav-link">Posts</router-link>
        </li>
      </ul>
    </nav><br />
    <transition name="fade">
      <router-view></router-view>
    </transition>
  </div>
</template>

<style>
    .fade-enter-active, .fade-leave-active {
      transition: opacity .5s
    }
    .fade-enter, .fade-leave-active {
      opacity: 0
    }
</style>

<script>

    export default{
    }
</script>

Save the file and see the output on the browser.

Step 6: Create a Form

Write the following code inside the CreateComponent.vue file. Next, we will add the Bootstrap Form to create a post.

// CreatePost.vue

<template>
  <div>
    <h1>Create A Post</h1>
    <form @submit.prevent="addPost">
      <div class="row">
        <div class="col-md-6">
          <div class="form-group">
            <label>Post Title:</label>
            <input type="text" class="form-control" v-model="post.title">
          </div>
        </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <div class="form-group">
              <label>Post Body:</label>
              <textarea class="form-control" v-model="post.body" rows="5"></textarea>
            </div>
          </div>
        </div><br />
        <div class="form-group">
          <button class="btn btn-primary">Create</button>
        </div>
    </form>
  </div>
</template>

<script>
    export default {
        data(){
        return {
          post:{}
        }
    },
    methods: {
      addPost(){
        console.log(this.post);
      }
    }
  }
</script>

We have taken the two fields. Post Title and Post Body. We have made one method called addPost().

When a user submits the form, we will get the input inside the addPost() method. We will then send a POST request to the Laravel server and save the data into the database.

I am skipping the validation of each field because this article is getting long and long. So we will do it in another post.

Save the file and go to this URL: http://vuelaravelcrud.test/create or /create. Then you can see the form below.

Step 7: Create a Laravel Backend

The primary purpose of the Laravel Framework in this example is to build a backend API. So, first, we will create a schema for the post table. Then, we also need a Post model. So let’s create both using the following command.

php artisan make:model Post -m

Write the following schema inside [timestamp]create_posts_table.php file.

public function up()
{
    Schema::create('posts', function (Blueprint $table) {
       $table->increments('id');
       $table->string('title');
       $table->text('body');
       $table->timestamps();
    });
}

Migrate the database using the following command.

php artisan migrate

Inside the Post.php model, write the following code to prevent the mass assignment exception.

<?php

// Post.php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    protected $fillable = ['title', 'body'];
}

Create a controller using the following command.

php artisan make:controller PostController

We are using Laravel Resource Collection for API development. So let us create a Laravel Resource Collection using the following command.

php artisan make:resource PostCollection

When building an API, you may need a transformation layer between your Eloquent models and the JSON responses returned to your application’s users. Laravel’s resource classes allow you to expressively and quickly transform your models and model collections into JSON.

The PostCollection resource is generated inside the app >> Http >>Resources >> PostCollection.php file.

<?php

// PostCollection.php

namespace App\Http\Resources;

use Illuminate\Http\Resources\Json\ResourceCollection;

class PostCollection extends ResourceCollection
{
    /**
     * Transform the resource collection into an array.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function toArray($request)
    {
        return parent::toArray($request);
    }
}

Step 8: Define the CRUD operations.

First, we define the function that stores the data inside the MySQL database.

<?php

// PostController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Resources\PostCollection;
use App\Post;

class PostController extends Controller
{
    public function store(Request $request)
    {
      $post = new Post([
        'title' => $request->get('title'),
        'body' => $request->get('body')
      ]);

      $post->save();

      return response()->json('success');
    }
}

Write the edit, update, index, and delete functions.

<?php

// PostController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Resources\PostCollection;
use App\Post;

class PostController extends Controller
{
    public function store(Request $request)
    {
      $post = new Post([
        'title' => $request->get('title'),
        'body' => $request->get('body')
      ]);

      $post->save();

      return response()->json('successfully added');
    }

    public function index()
    {
      return new PostCollection(Post::all());
    }

    public function edit($id)
    {
      $post = Post::find($id);
      return response()->json($post);
    }

    public function update($id, Request $request)
    {
      $post = Post::find($id);

      $post->update($request->all());

      return response()->json('successfully updated');
    }

    public function delete($id)
    {
      $post = Post::find($id);

      $post->delete();

      return response()->json('successfully deleted');
    }
}

Step 9: Define the API routes

We must define the API routes inside the routes >> api.php file.

<?php

// api.php

use Illuminate\Http\Request;

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

Route::post('/post/create', 'PostController@store');
Route::get('/post/edit/{id}', 'PostController@edit');
Route::post('/post/update/{id}', 'PostController@update');
Route::delete('/post/delete/{id}', 'PostController@delete');
Route::get('/posts', 'PostController@index');

Step 10: Use Axios to send a network request

AJAX is key to this architecture, so we’ll use Axios as the HTTP client.

We created the backend. The next step is to send a POST request to the Laravel development server.

Write the following code inside the CreateComponent.vue file’s addPost() function.

// CreateComponent.vue

addPost(){
    let uri = 'http://vuelaravelcrud.test/api/post/create';
    this.axios.post(uri, this.post).then((response) => {
       this.$router.push({name: 'posts'});
    });
}

Now, display the posts. So let us edit the IndexComponent.vue file.

// IndexComponent.vue

<template>
  <div>
      <h1>Posts</h1>
        <div class="row">
          <div class="col-md-10"></div>
          <div class="col-md-2">
            <router-link :to="{ name: 'create' }" class="btn btn-primary">Create Post</router-link>
          </div>
        </div><br />

        <table class="table table-hover">
            <thead>
            <tr>
                <th>ID</th>
                <th>Item Name</th>
                <th>Item Price</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody>
                <tr v-for="post in posts" :key="post.id">
                    <td>{{ post.id }}</td>
                    <td>{{ post.title }}</td>
                    <td>{{ post.body }}</td>
                    <td><router-link :to="{name: 'edit', params: { id: post.id }}" class="btn btn-primary">Edit</router-link></td>
                    <td><button class="btn btn-danger">Delete</button></td>
                </tr>
            </tbody>
        </table>
  </div>
</template>

<script>
  export default {
      data() {
        return {
          posts: []
        }
      },
      created() {
      let uri = 'http://vuelaravelcrud.test/api/posts';
      this.axios.get(uri).then(response => {
        this.posts = response.data.data;
      });
    }
  }
</script>

Step 11: Send edit and update request

When our edit component loads. We need to fetch the data from the server to display the existing data.

Then, after changing the data in the textbox and textarea, we hit the update button, and we call the updatePost() function to send a post request to the server to update the data.

// EditComponent.vue

<template>
  <div>
    <h1>Edit Post</h1>
    <form @submit.prevent="updatePost">
      <div class="row">
        <div class="col-md-6">
          <div class="form-group">
            <label>Post Title:</label>
            <input type="text" class="form-control" v-model="post.title">
          </div>
        </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <div class="form-group">
              <label>Post Body:</label>
              <textarea class="form-control" v-model="post.body" rows="5"></textarea>
            </div>
          </div>
        </div><br />
        <div class="form-group">
          <button class="btn btn-primary">Update</button>
        </div>
    </form>
  </div>
</template>

<script>
    export default {

      data() {
        return {
          post: {}
        }
      },
      created() {
        let uri = `http://vuelaravelcrud.test/api/post/edit/${this.$route.params.id}`;
        this.axios.get(uri).then((response) => {
            this.post = response.data;
        });
      },
      methods: {
        updatePost() {
          let uri = `http://vuelaravelcrud.test/api/post/update/${this.$route.params.id}`;
          this.axios.post(uri, this.post).then((response) => {
            this.$router.push({name: 'posts'});
          });
        }
      }
    }
</script>

You can try to edit the data and update the form, and you can see that we can now update the data.

Step 12: Delete the data.

The only remaining thing is to delete or remove the data from the database.

Write the final code inside the IndexComponent.vue file.

// IndexComponent.vue

<template>
  <div>
      <h1>Posts</h1>
        <div class="row">
          <div class="col-md-10"></div>
          <div class="col-md-2">
            <router-link :to="{ name: 'create' }" class="btn btn-primary">Create Post</router-link>
          </div>
        </div><br />

        <table class="table table-hover">
            <thead>
            <tr>
                <th>ID</th>
                <th>Item Name</th>
                <th>Item Price</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody>
                <tr v-for="post in posts" :key="post.id">
                    <td>{{ post.id }}</td>
                    <td>{{ post.title }}</td>
                    <td>{{ post.body }}</td>
                    <td><router-link :to="{name: 'edit', params: { id: post.id }}" class="btn btn-primary">Edit</router-link></td>
                    <td><button class="btn btn-danger" @click.prevent="deletePost(post.id)">Delete</button></td>
                </tr>
            </tbody>
        </table>
  </div>
</template>

<script>
  export default {
      data() {
        return {
          posts: []
        }
      },
      created() {
      let uri = 'http://vuelaravelcrud.test/api/posts';
      this.axios.get(uri).then(response => {
        this.posts = response.data.data;
      });
    },
    methods: {
      deletePost(id)
      {
        let uri = `http://vuelaravelcrud.test/api/post/delete/${id}`;
        this.axios.delete(uri).then(response => {
          this.posts.splice(this.posts.indexOf(id), 1);
        });
      }
    }
  }
</script>

That’s it!

Github Code

Krunal

Krunal Lathiya is a seasoned Computer Science expert with over eight years in the tech industry. He boasts deep knowledge in Data Science and Machine Learning. Versed in Python, JavaScript, PHP, R, and Golang. Skilled in frameworks like Angular and React and platforms such as Node.js. His expertise spans both front-end and back-end development. His proficiency in the Python language stands as a testament to his versatility and commitment to the craft.

59 thoughts on “Vue Laravel CRUD: How to Create Vue Laravel Application”

Herve

December 4, 2018 at 9:47 am

great this tutorial
Reply
Faiz

December 8, 2018 at 9:37 pm

thanks for this tutorial. really usefull
.
appreciate
Reply
mazahaler

December 16, 2018 at 1:16 pm

Very good tutorial
Reply
Lyon

December 23, 2018 at 1:08 am

thank sir, this is great tutorial, but i want to ask some question
first, do i really need VueAxios, is just axios not enough?
second, what’s the meaning of this ‘new Vue(Vue.util.extend({ router })).$mount(‘#app’);’ and what is the different with this:

const App = new Vue({
el: “#app”,
router,
});
Reply
David Blackwell

January 23, 2019 at 2:49 am

Thank for good tutorial.
If you can continue to post your tutorials, I am very happy.
***********************
I think your code has one error.
In indexConponent.vue file, this line don’t work well.
this.posts.splice(this.posts.indexOf(id), 1);
***********************************
Any way, many thanks.
Reply
- Habibie
  
  March 28, 2019 at 9:22 am
  
  You can use :
  this.posts.splice(this.posts, 1);
  
  It will delete post that you’ve been selected.
  Reply
  - medhy
    
    May 2, 2019 at 4:02 am
    
    for real yes, this is correctly delete, but in views, this only delete first column
    Reply
- jklasng
  
  June 19, 2019 at 6:15 am
  
  this.posts is an array of objects, so the correct code is:
  
  this.posts.splice(this.posts.findIndex(post => post.id === id), 1);
  Reply
  - Ben
    
    September 22, 2019 at 9:41 pm
    
    I know I am late to the party but I think creating a getPosts method is a neater way of doing things.
    
    created() {
    this.getPosts();
    },
    methods: {
    getPosts() {
    var uri = “/api/posts”;
    console.log(uri);
    this.axios.get(uri).then(response => {
    this.posts = response.data.data;
    });
    },
    deletePost(id) {
    let uri = `/api/post/delete/${id}`;
    this.axios.delete(uri).then(response => {});
    this.getPosts();
    }
    }
    Reply
Balamurugan A

February 12, 2019 at 7:18 am

Thanks man
Reply
Balamurugan A

February 12, 2019 at 7:19 am

Thanks Man. Working good……..
Reply
Patrick

February 15, 2019 at 11:22 am

Thank you, sir! One tiny note, i think you put CreatePost.vue in the comment on the top of one of the file contents, but you meant to put CreateComponent.vue.
Reply
Richard downs

February 15, 2019 at 12:12 pm

I getting and error:

app.js:285 OPTIONS http://vuelaravelcrud.test/api/post/create net::ERR_NAME_NOT_RESOLVED

I have to use 127.0.0.1:8000 to visit the site though as http://vuelaravelcrud.test doesnt work. But when I replace this line in CreateComponent.vue:
let uri = ‘http://vuelaravelcrud.test/api/post/create’;
with:
let uri = ‘http://127.0.0.1:8000/api/post/create’;
I get this error: (Internal Server Error) Error: Request failed with status code 500
Any ideas??
Reply
Richard downs

February 15, 2019 at 12:39 pm

I am getting this error when i try to create:
app.js:285 POST http://localhost:8000/api/post/create 500 (Internal Server Error)
dispatchXhrRequest @ app.js:285
xhrAdapter @ app.js:119
dispatchRequest @ app.js:724
Promise.then (async)
request @ app.js:531
Axios.(anonymous function) @ app.js:551
wrap @ app.js:984
addPost @ app.js:1851
submit @ app.js:37824
invokeWithErrorHandling @ app.js:42779
invoker @ app.js:43101
original._wrapper @ app.js:48408
app.js:651 Uncaught (in promise) Error: Request failed with status code 500
at createError (app.js:651)
at settle (app.js:814)
at XMLHttpRequest.handleLoad (app.js:184)

Can you help me
Reply
- Thomas
  
  April 5, 2019 at 10:06 am
  
  go to console and check your network error.
  should have more info there.
  Reply
md.wasim

March 7, 2019 at 4:00 am

{{ mix(‘css/app.css’) }} not work here but if i use {{ url(‘public/css/app.css’) }} then its works fine.
]so what i do now ?
Reply
John

March 23, 2019 at 5:35 am

Some times the data is fetched from the server but does not displayed. What could be the reason. Vuejs seems to be very slow when compared to jQuery. Is it natural
Reply
Ivan

April 5, 2019 at 10:45 am

OPTIONS http://vuelaravelcrud.test/api/post/create net::ERR_NAME_NOT_RESOLVED
dispatchXhrRequest @ app.js:13926
xhrAdapter @ app.js:13760
dispatchRequest @ app.js:35865
Promise.then (async)
request @ app.js:35321
Axios.(anonymous function) @ app.js:35341
wrap @ app.js:13549
addPost @ app.js:50684
submit @ app.js:50708
invoker @ app.js:38093
fn._withTask.fn._withTask @ app.js:37892
________________________________________________________________
XHR failed loading: OPTIONS “http://vuelaravelcrud.test/api/post/create”.
app.js:13951 Uncaught (in promise) Error: Network Error
at createError (app.js:13951)
at XMLHttpRequest.handleError (app.js:13835)
createError @ app.js:13951
handleError @ app.js:13835
Promise.then (async)
addPost @ app.js:50684
submit @ app.js:50708
invoker @ app.js:38093
fn._withTask.fn._withTask @ app.js:37892
Reply
- thomas bousson
  
  April 10, 2019 at 1:24 pm
  
  You need to change you URI: “http://vuelaravelcrud.test/api/post/create”.
  get rid of http://vuelaravelcrud.test
  Reply
realtebo

May 2, 2019 at 4:10 am

Question: can we safely delete bootstrap.js?

It is useless in our situation, and so we can eradicate jquery and also axios from global namespace !
Reply
David Huanca

May 16, 2019 at 5:05 am

Thanks very much
Reply
ZIN MYO SWE

May 21, 2019 at 3:36 pm

Thank again
Reply
LeoGetz

May 23, 2019 at 7:18 pm

Thanks the detailed tutorial! Great work!

Let me correct a little bug which is mentioned also by David Blackwell:
this.posts.splice(this.posts.indexOf(id), 1); doesn’t work because the posts is a multi dimensional array, So it won’t find the deleted ‘id’.
my workaround:
for (var i = 0; i < this.posts.length; i++) {
if (this.posts[i].id === id) {
this.posts.splice(i, 1);
}
}
Reply
zinmyo

May 26, 2019 at 2:21 pm

addPost(){
let uri = ‘api/post/create’;
this.axios.post(uri, this.post).then((response) => {
this.$router.push({name: ‘posts’});
});
}

I solved by changing this uri. Hope it will help
Reply
M Yusuf Ibrahim

May 28, 2019 at 2:56 am

Hi, what a great tutorial! how about upgrading this tutorial using the latest version of Laravel 5.8 ?
Reply
diekatze

June 7, 2019 at 7:20 am

Thank you! Great tutorial!
Reply
Stefano

June 10, 2019 at 1:45 am

Thank you! Marvellous tutorial!
Reply
- Stefano
  
  June 11, 2019 at 3:02 am
  
  I’m sorry!
  When I tried to edit the post nothing was shown in the form, so after several tests I decided to replace this uri in the EditComponent.vue:
  
  let uri = `http: //vuelaravelcrud.test/api/post/edit/$ {this. $ route.params.id} `;
  
  with this
  
  let uri = ‘http: //vuelaravelcrud.test/api/post/edit/’+this.$route.params.id;
  
  It seems that the syntax $ {var} does not work in let var, so I replaced all the other uri with the concat method.
  
  In indexComponent the delete method
  let uri = ‘https://www.laravel-voyager.local/api/post/delete/’+id;
  
  And in EditComponent
  created() {
  let uri = ‘https://www.laravel-voyager.local/api/post/edit/’+this.$route.params.id;
  updatePost() {
  let uri = ‘https://www.laravel-voyager.local/api/post/update/’+this.$route.params.id;
  Reply
  - Albert Israel
    
    August 4, 2019 at 8:56 am
    
    @Stefano Because the one used in the tutorial is not single quotes (”) but tilde (“) . It worked when I tried it. Also, remove the spaces inside the braces $ {this. $ route.params.id} . It should work 🙂
    Reply
Zuhair

June 12, 2019 at 9:58 am

Level Bro
Reply
zaffar

July 10, 2019 at 6:26 am

Once you complete step 4, and then try the following
http://vuelaravelcrud.test/create
http://vuelaravelcrud.test/posts
http://vuelaravelcrud.test/edit/21

nothing shown on the browser or the browser console or on the terminal. Do we need to keep running npm run watch, I did keep running it but it still doesn’t works.
Soon I complete step 5 these navigations work. Can somebody help me out with this! Why the above mentioned urls not working am I missing something?
Cheers,
Reply
- ajie
  
  October 11, 2019 at 8:05 am
  
  i had the same problem, but i found the problem. i miss-typed the routes: routes in mode inside VueModel constructor (const router) inside app.js (the paremeter inside VueRouter constructor should looks like this : {mode: ‘history’, routes: routes} . re run the npm run watch, then serve using php artisan serve, and all components showing up now.
  Reply
israel bazan

September 4, 2019 at 5:20 pm

great tutorial.
a little correction:
correct way to delete item from the list of post in IndexComponent.vue:

methods: {
deletePost(id)
{

let uri = `http://vuelaravelcrud.test/api/post/delete/${id}`;

this.axios.delete(uri).then(response => {
let i = this.posts.map(item => item.id).indexOf(id); // find index of your object
this.posts.splice(i, 1)
});
}
}
Reply
- sergey
  
  January 5, 2020 at 8:51 pm
  
  Very useful clarification
  Reply
bhawani singh

October 1, 2019 at 8:09 am

thanks for the tutorial ….tutorial is awesome but in this tutorial one main mistack
you cannot tell how to install vue in laravel
this issue frustrating me
….
new user keep in mind to install vue and then start work
thanks for the tutorial
with practical session
Reply
Kapil Dahal

October 2, 2019 at 12:17 pm

If any one get error on edit and delete, change uri from api routes to web routes
Reply
Chris

October 16, 2019 at 4:50 pm

to get vue to work I had to run
npm install vue vue-router vue-axios vue –save
rather than
npm install vue-router vue-axios vue –save
Reply
kevin

October 24, 2019 at 7:32 am

thanks, you saved a life
Reply
Novel

October 28, 2019 at 11:06 pm

i got problem this page is blank , how to resolve?
Reply
Chanaka

December 15, 2019 at 6:41 pm

Thanks It’s Really Help full.
Can you help me for Laravel VueJS validation as well ?

Because I’m stuck in middle. I can not display respond error message in particular input.

Please support.

Chanaka Perera
Reply
Rajeev

January 2, 2020 at 1:33 pm

Thanks a lot. Very carefully written tutorial. Covers all essentials in easy to understand manner. Highly appreciate your efforts.
Reply
- Krunal
  
  January 2, 2020 at 1:56 pm
  
  Thanks!!
  Reply
Sergey

January 5, 2020 at 8:54 pm

Great Job
Reply
Frank

January 7, 2020 at 7:34 pm

Hey there. Thank you for this tut. I could get it completed after a lot of comparing and trying.
Reply
Frank

January 8, 2020 at 12:18 am

If anyone’s on a Mac and uses the Mamp Php and MySql and if you get strange errors it might help to call artisan like this:
source ~/.bash_profile && php artisan serve –port8008
(the port option works and might help if you want to run more than 1 project, it is not necessary at all)

My .bash_profile has the Mamp paths in it but something with Laravel, artisan, i don’t know yet, resetted the app to use the system’s php (which is 7.19 and therefor too old for this app, that’s why i found out in the first place).

So even if you have the right paths in your shell’s profile it could be they are ignored for some reason: If someone knows why this might happen i’d be interested in hearing about it.
Reply
Frank

January 21, 2020 at 2:03 am

Uh, sorry, the port option, it is –port=8008
Reply
Massimiliano

January 26, 2020 at 7:58 pm

Hey there,

It seems that at least on latest Laravel version (6.0), the styles are not there as app.css is empty. so the page looks fully unstyled.
Adding this in the head section helped
Reply
Jade

March 20, 2020 at 5:27 pm

thank you so much for this tutorial which works amazing!
Reply
laraben

March 25, 2020 at 3:20 pm

I’m stuck with the example component.
I followed every step but i keep getting the example component instead of the other ones.
I have checked everything, but can’t seem to find why i keep getting the example component instead of the other ones
Reply
- Oliver Maglana
  
  July 11, 2020 at 3:16 pm
  
  Same thing but I solved it by adding on
  “`
  (navigate to resources/js/App.Js)
  
  import App from ‘./App.vue’; <– add this line of code
  
  const app = new Vue({
  el: '#app',
  components: { App }, <– Add this line of code App.vue to the post.blade.php
  router
  });
  
  (resources/views/post.blade.php)
  in side the body
  
  {{– –}} <– remove or comment out
  <– add this, we reference the App.vue on components: {App}
  
  “`
  Reply
Sham

June 6, 2020 at 5:49 pm

Hello Sir/Mam

When i open any url like http://127.0.0.1:8000/home the content area is empty.

Laravel
Reply
JayKeiAr

September 16, 2020 at 7:22 am

Good sample for newbies
Reply
Rodney D

January 28, 2021 at 6:31 am

I kept getting “Vue.use is not a function” in chrome’s debugger.
in app.js, I changed
window.Vue = require(‘vue’);
to
window.Vue = require(‘vue’).default;
Reply
Rodne D

January 29, 2021 at 12:58 am

using Laravel 8, I got the error ” Target class [PostController] does not exist”
doing what is described and fixed it.
Adding
protected $namespace=’App\Http\Controllers’;
to RouteServiceProvider.php
Reply
- ekrem Hacıbektasoglu
  
  August 31, 2021 at 1:40 am
  
  thanks this is big problem must enable protected $namespace=’App\Http\Controllers’;
  Reply
Rodney D

January 29, 2021 at 1:24 am

using Laravel 8, In postman
http://127.0.0.1:8000/api/post/create?title=test&body=body5
gave me an error
Class ‘App\Post’ not found in file

The fix was changing
use App\Post
to
use App\Models\Post
in PostController.php

and changing
namespace App;
to
namespace App\Models;
in post.php
Reply
Suleman

April 23, 2021 at 5:47 pm

Hello
no request is showing in network of inspect.
Reply
Saanvi Sen

October 7, 2021 at 4:35 pm

Very comprehensive and helpful.
Thank you for sharing.

Recently I came across an admin template that is made of laravel and VueJS. It is Materio Vuetify VueJS Admin Template. It can be helpful to develop a responsive single-page application.
Reply
redmon

May 3, 2022 at 1:34 am

I can only see a blank page when I run the application though have followed the entire procedure.what could be the problem
Reply