Author: therichpost

Hello to all, welcome to therichpost.com. In this post, I will tell you, Vue Laravel Bootstrap Owl Carousel Working Example.

If you are new in laravel and vuejs, then you can check below links to get vue laravel basics information.

https://therichpost.com/category/laravel

https://therichpost.com/category/laravl-5-7

https://therichpost.com/category/vuejs

Here I am showing Bootstrap Owl Carousel working in Vue Laravel:

Installation & Coding:

Here are the some basic commands need to run into your terminal to install fresh laravel setup:

$ composer create-project --prefer-dist laravel/laravel vuelaraveowlcarousel //install fresh laravel setup

$ cd vuelaraveowlcarousel //go laravel setup

$ npm install //node modules for vuejs

Now come to the vue code into laravel:

Here is the code, you need to add into vuelaraveowlcarousel/resources/js/components/ExampleComponent.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                 <center><h2>Vue Laravel Bootstrap Owl Carousel Working Example:</h2></center>  
         <div id="demo" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
          </ol>

          <!-- Wrapper for slides -->
          <div class="carousel-inner">
            <div class="carousel-item active">
            <img src="https://responsivedesign.is/wp-content/uploads/2016/11/Owl-Carousel-2_ri92wj.jpg" alt="Los Angeles" style="width:100%;">
            </div>

            <div class="carousel-item">
            <img src="https://responsivedesign.is/wp-content/uploads/2016/11/Owl-Carousel-2_ri92wj.jpg" alt="Chicago" style="width:100%;">
            </div>
          
            <div class="carousel-item">
            <img src="https://responsivedesign.is/wp-content/uploads/2016/11/Owl-Carousel-2_ri92wj.jpg" alt="New york" style="width:100%;">
            </div>
          </div>

          <!-- Left and right controls -->
            <a class="carousel-control-prev" href="#demo" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
            </a>
            <a class="carousel-control-next" href="#demo" data-slide="next">
            <span class="carousel-control-next-icon"></span>
            </a>
          </div>
            </div>
        </div>
    </div>
</template>

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

Here is the code you need to add
vuelaraveowlcarousel/resources/js/ app.js file:

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */
window.Vue = require('vue');
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

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

const app = new Vue({
    el: '#app'
});

Now come to the laravel code to display vue output:

Here is the code you need to add into
vuelaraveowlcarousel/resources/ views/welcome.blade.file:

<div id="app"><example-component></example-component></div>
<script src="{{asset('js/app.js')}}"></script>

This is done. Now run php artisan serve command to see the working output and if you have any query related to this post then please do comment below or ask question.

Thank you

Ludhiane wala ajay

TheRichPost

Hello to all, welcome to therichpost.com. In this post, I will do, Vue Laravel Image Upload.

I have shared the multiple image upload in laravel and now I will upload the image into laravel folder with the help of vuejs and I have done this easily.

Here I am sharing some working images:

Now come to the coding point and here are steps need to follow:

1. Here are some basics commands need to run into terminal to install laravel setup and node modules for vuejs:

$ composer create-project –prefer-dist laravel/laravel vuelaraveluploadimage

$ cd vuelaraveluploadimage

$ npm install

$ composer create-project --prefer-dist laravel/laravel vuelaraveluploadimage
$ cd vuelaraveluploadimage
$ npm install

2. Now, here is the below code, you need to add into your resources\js\components\ExampleComponent.vue file:

I have used axios post method to upload file and this behaves like ajax:

<template>
    <div class="container">
        <h2>Vue Laravel Image Upload</h2>
        <form @submit="checkForm" ref="myForm">
        <div class="form-group">
            <label for="email">Upload Profile Pic:</label>
            <input type="file" name="profile_pic" id="profile_pic">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
        </form>
    </div>
</template>

<script>
    export default {
        methods:{
            checkForm: function (e) {
                var myFormData = new FormData(this.$refs.myForm)
                axios({
                    method: 'post',
                    url: '/vueuploadimage',
                    data: myFormData,
                    config: { headers: {'Content-Type': 'multipart/form-data' }},
                }).then(function (response) {
                  alert(response.data.message);
                });
                e.preventDefault();
            }
        },
    }
</script>

3. Now, here is the below code, you need to add into resources\js\app.js file:

require('./bootstrap');
window.Vue = require('vue');
import "bootstrap/dist/css/bootstrap.css";
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
    el: '#app'
});

4. Now here is the code, you need to add into your resources\views\welcome.blade.php file:

<div id="app"><example-component></example-component></div>     
<script src="{{asset('js/app.js')}}"></script>

5. Now here is the code, you need to add into your routes/web.php file:

Route::post("/vueuploadimage" , "Controller@uploadimage");

6. Now here is the code, you need to add into your app\Http\Controllers\Controller.php file:

In this file, I have wrote the file upload code in folder and also please img folder into public folder:

...
use Illuminate\Http\Request;
public function uploadimage(Request $request)
    {
    	if ($request->hasFile('profile_pic'))
    	{
            $file      = $request->file('profile_pic');
            $filename  = $file->getClientOriginalName();
            $extension = $file->getClientOriginalExtension();
            $picture   = date('His').'-'.$filename;
            $file->move(public_path('img'), $picture);
            return response()->json(["message" => "Image Uploaded Succesfully"]);
    	} 
      else
      {
          	return response()->json(["message" => "Select image first."]);
      }
    }
...

7. After all above set up, run php artisan serve command into your terminal and check the Vue laravel Image Upload working and if you have any query related to this post then do comment below or ask questions.

Thank you,

Ludhiane wala ajay,

TheRichPost

Hello to all, welcome to therichpost.com. In this post, I will tell you, Vue Laravel Auth Login.

Vue laravel combination is very good for spa(single page application). In this post, we will login laravel auth with vuejs and this is very interesting.

Also I have added vue form validation in it.

Here are the some working images:

Now come to the coding area. Every laravel developer knows laravel default auth or if you don’t familiar with this then please check this below link:

How to Setup Laravel Default Login Authentication?

Now here are the coding steps you need to follow for Vue Laravel Auth Login:

1. Here are the some basic commands to you need to run into your terminal to install fresh laravel setup and vue setup:

$ composer create-project --prefer-dist laravel/laravel vuelaravelauthlogin //install fresh laravel setup
$ cd vuelaravelauthlogin //go laravel setup
$ npm install //node modules for vuejs

2. Now, here is the below code, you need to add into your resources\js\components\ExampleComponent.vue file:

In this file, you can see, I have added vue form validation and I have used axios.post to send the vue form data to laravel controller:

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="page-header">
              <h2>Vue Laravel Auth Login</h2>
            </div>
            <div class="col-md-12 text-center">
                <p v-if="errors.length">
                    <b>Please correct the following error(s):</b>
                    <ul class="list-group">
                      <li v-for="error in errors" class="list-group-item list-group-item-danger">{{ error }}</li>
                    </ul>
                </p>
            </div>
            <div class="col-md-6" v-if="loginfalse = true">
                <form @submit="checkForm" id="createAdministrator">
                  <div class="form-group">
                    <label for="email">Email address:</label>
                    <input v-model="email" type="email" class="form-control" id="email" placeholder="Enter Email" name="email">
                  </div>
                  <div class="form-group">
                    <label for="pwd">Password:</label>
                    <input v-model="password" type="password" class="form-control" id="password" placeholder="********" name="password">
                  </div>
                  <button type="submit" class="btn btn-default">Submit</button>
                </form>
            </div>
        </div>
    </div>
</template>

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

         data() {
            return {
                errors: [],
                state: {
                    email: '',
                    password: ''
                }
            }
        },
        methods:{
        checkForm: function (e) {
           
          this.errors = [];
          if (!this.email) {
            this.errors.push('Email required.');
          }
          if (!this.password) {
            this.errors.push('Password required.');
          }
        else
        {
        var formContents = jQuery("#createAdministrator").serialize();
        
        
          axios.post('/vuelogin', formContents).then(function(response, status, request) {  
                            alert(response.data.user);
                        
                        
                    }, function() {
                        console.log('failed');
                    });
        }
        
          e.preventDefault();
        }
      }
    }
</script>

3. Now, here is the below code, you need to add into resources\js\app.js file:

require('./bootstrap');
import "bootstrap/dist/css/bootstrap.css";
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
    el: '#app'
});

4. Now here is the code, you need to add into your  resources\views\welcome.blade.php file:

<div id="app"><example-component></example-component></div>
<script src="{{asset('js/app.js')}}"></script>

5. Now here is the code, you need to add into your routes/web.php file:

Route::post('/vuelogin', 'Auth\LoginController@vuelogin');

6. Now here is the code, you need to add into your app\Http\Controllers\Auth\LoginController.php file:

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\AuthenticatesUsers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth; 
use App\User;
class LoginController extends Controller
{
    /*
    |--------------------------------------------------------------------------
    | Login Controller
    |--------------------------------------------------------------------------
    |
    | This controller handles authenticating users for the application and
    | redirecting them to your home screen. The controller uses a trait
    | to conveniently provide its functionality to your applications.
    |
    */

    use AuthenticatesUsers;

    /**
     * Where to redirect users after login.
     *
     * @var string
     */
    protected $redirectTo = '/home';

    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('guest')->except('logout');
    }

    public function vuelogin(Request $request)
    {
        if(Auth::attempt(['email' => $request->email, 'password' => $request->password])){ 
          $user                  = Auth::user();
          $username = $user->name;
          return response()->json([
            'status'   => 'success',
            'user' => $username,

          ]); 
        } else { 
          return response()->json([
            'status' => 'error',
            'user'   => 'Unauthorized Access'
          ]); 
        } 
    }
}

7. Don’t forget to add your database details into your .env file. After all above set up, run php artisan serve command into your terminal and check the Vue laravel Auth Login working and if you have any query related to this post then do comment below or ask questions.

Thank you,

Ludhiane wala ajay,

TheRichPost

Hello to all, welcome to therichpost.com. In this post, I will share with you, Vue Laravel Chart js with Dynamic Data.

I have shared many post related to Vue laravel and this is also for same topic.

In this post, I will show laravel dynamic data into chart js bar chart added in vuejs component.

Here is the working picture:

Here is the working coding steps need to follow, please do steps wise if you want good results:

1. Here are the basics command to install fresh laravel setup on your machine:

$ composer create-project --prefer-dist laravel/laravel blogvuechartjs //install frest laravel setup

$ cd blogvuechartjs // go inside laravel setup

2. Here are the important commands, you need to run into your terminal to install chart js:

$ npm install //install node modules

$ npm install vue-chartjs chart.js --save //install chartjs package

3. After run above commands, now we will move coding area and I must tell you, laravel gives us default vue setup and this is the best thing and here you can find vue setup inside laravel:

4. Now, here is the below code, you need to add into your resources\js\components\ExampleComponent.vue file:

<template>
<div class="container">
<center><h1>Vue laravel Chartjs</h1></center>
           <canvas ref="chart"></canvas>
       </div>
</template>

<script>
    export default{
        mounted() {
        let uri = 'http://localhost:8000/chartjs';
        axios.get(uri).then((response) => {
        var chart = this.$refs.chart;
            var ctx = chart.getContext("2d");
            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: response.data.month,
                    datasets: [{
                        label: '# of Votes',
                        data: response.data.data,
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    }
                }
            });
        }).catch(error => {
        console.log(error)
        this.errored = true
      });
        }
    }
</script>

5. Now, here is the below code, you need to add into resources\js\app.js file:

require('./bootstrap');
window.Vue = require('vue');
import axios from 'axios';
Vue.use(axios);
import {Bar} from 'vue-chartjs';
Vue.component('example-component', require('./components/ExampleComponent.vue'));

const app = new Vue({
    el: '#app'
});

6. Now, here is the below code, you need to add app\Http\Controllers\Controller.php file:

....
public function Chartjs(){
    $month = array('Jan', 'Feb', 'Mar', 'Apr', 'May');
    $data  = array(1, 2, 3, 4, 5);
    return response()->json(['month' => $month, 'data' => $data]);
  }
....

7. Now. here is the code, you need to add routes\web.php file:

Route::get("/chartjs", "Controller@Chartjs");

8. Now here is the code, you need to add into your  resources\views\welcome.blade.php file:

<div id="app"><example-component></example-component></div>
<script src="{{asset('js/app.js')}}"></script>

Now you are done and if you have any query related to this post, then do comment below or ask question.

Thank you,

Jatt,

TheRichPost

Note: Every Post has been made by heart.