Laravel 7 Vue JS Post Axios Request Example

In this tutorial you will learn about the Laravel 7 Vue JS Post Axios Request Example and its application with practical example.

In this Laravel 7 Vue JS Axios post Request Example tutorial, I’ll show you how to implement post request with Vue JS Axios in laravel. In this tutorial you will learn to create post request with Vue JS Axios in laravel.

Table Of Contents−

Laravel 7 Vue JS Post Axios Request Example

Step 1: Download Laravel Fresh Setup
Step 2: Setup Database Credentials

Step 3: Make Migration & Model
Step 4: Add Routes
Step 5: Make Controller By Command

Step 6: Install Vue Js dependency
Step 7: Create blade file and layout
Step 8: Run Development Server

Step 1: Download Laravel Fresh Setup

First of all we need to create a fresh laravel project, download and install Laravel using the below command

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

1	composer create-project --prefer-dist laravel/laravel blog

Step 2: Setup Database Credentials

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3: Make Migration & Model

Now, in this step we will create model and migration file for form. Please run the following command:

php artisan make:model Post -m

1	php artisan make:model Post -m

after that, open your posts migration file and paste the following code:

Schema::create('posts', function (Blueprint $table) {
     $table->bigIncrements('id');
     $table->string('title');
     $table->timestamps();
});

Schema::create('posts', function (Blueprint $table) {

$table->bigIncrements('id');

$table->string('title');

$table->timestamps();

});

Again open your terminal and run the php artisan migrate to migrate our tables into your database:

php artisan migrate

1	php artisan migrate

After that, open Post model and update the following code into your app/Post.php model file:

namespace App;
use App\Events\PostCreated;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
    protected $guarded = [];
}

namespace App;

use App\Events\PostCreated;

use Illuminate\Database\Eloquent\Model;

class Post extends Model

{

protected $guarded = [];

}

Step 4: Add Routes

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

Route::get('/post', 'PostController@index')->name('post');
Route::post('/post', 'PostController@createPost');

1 2	Route::get('/post', 'PostController@index')->name('post'); Route::post('/post', 'PostController@createPost');

Step 5: Make Controller By Command

Now, lets create a controller named PostController using command given below –

php artisan make:controller PostController

1	php artisan make:controller PostController

This command will create a controller that name PostController inside the controller folder. Next, open it app/Https/Controller/PostController.php and update the following methods into your PostController file:

<?php
namespace App\Http\Controllers;
use App\Post;
use Illuminate\Http\Request;
class PostController extends Controller
{
     
    public function index()
    {
       return view('post');
    }
    public function createPost(Request $request)
    {
        $post = new Post;
        $post->title = $request->title;
        $post->save();
        return response()->json([
            'message' => 'New post created'
        ]);
    }
}

<?php

namespace App\Http\Controllers;

use App\Post;

use Illuminate\Http\Request;

class PostController extends Controller

{

public function index()

{

return view('post');

}

public function createPost(Request $request)

{

$post = new Post;

$post->title = $request->title;

$post->save();

return response()->json([

'message' => 'New post created'

]);

}

Step 6: Install Vue Js dependency

npm install

1	npm install

now open webpack.mix.js file and update the following code into your file. Make an asstes folder inside resources folder and copy js and sass folder inside it. Thats all. We need it to setup our laravel mix

const mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js/app.js')
    .sass('resources/assets/sass/app.scss', 'public/css/app.css');

const mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js/app.js')

.sass('resources/assets/sass/app.scss', 'public/css/app.css');

Next Go to resources/assets/js/components/ folder. And create a new components name PostComponent.vue. Then update the following code into your PostComponent.vue file:

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Create new post</div>
                    <div class="card-body">
                        <p id="success"></p>
                        <form @submit.prevent="addNewPost">
                            <input type="text" name="title" v-model="newPost">
                            <input type="submit" value="Submit">
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
         
        data(){
            return {
              newPost: ''
            }
        },
        methods: {
            addNewPost(){
                axios.post('/post',{title: this.newPost, user_id:userId})
                .then((response)=>{
                $('#success').html(response.data.message)
                })
            }
        }
    }
</script>

<div class="card-header">Create new post</div>

</form>

</div>

</template>

export default {

data(){

return {

newPost: ''

}

methods: {

addNewPost(){

axios.post('/post',{title: this.newPost, user_id:userId})

.then((response)=>{

$('#success').html(response.data.message)

})

}

</script>

The above code is to send form data to controller using axios post request in laravel. Next, Go to resources/assets/js then open app.js file and intialize vue js components in this file. So open app.js file and update the following code into your app.js file:

require('./bootstrap');
window.Vue = require('vue');
Vue.component('post-component', require('./components/PostComponent.vue').default);
const app = new Vue({
    el: '#app',
});

require('./bootstrap');

window.Vue = require('vue');

Vue.component('post-component', require('./components/PostComponent.vue').default);

const app = new Vue({

el: '#app',

});

Step 7: Create blade file and layout

Now, Open resources/layouts/app.blade.php and update the following code into it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('app.name', 'Laravel') }}</title>
    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
    <title>Send form data with vue js in laravel</title>
</head>
<body>
     
    <div id="app">
    <div class="py-4">
        @yield('content')
    </div>
     
    </div>
    <script src="{{ mix('js/app.js') }}" defer></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>{{ config('app.name', 'Laravel') }}</title>

<title>Send form data with vue js in laravel</title>

</head>

<body>

@yield('content')

</div>

</body>

</html>

Next, resources/views/ and create a new blade view file name post.blade.php. And update the following code into your post.blade.php view file:

@extends('layouts.app')
@section('content')
  <post-component></post-component>
            
@endsection

@extends('layouts.app')

@section('content')

<post-component></post-component>

@endsection

Step 8: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

npm run dev 
//or
npm run watch

npm run dev

//or

npm run watch

Now, open the following URL in browser to see the output –

http://localhost:8000/post

1	http://localhost:8000/post

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 7 Vue JS Post Axios Request Example