Laravel 9 Vue Js Image Upload Example With Preview

Hello Artisan,

In this laravel vue image upload tutorial, I will explain how to upload image in laravel with vue js. I will explain step by step so that you can understand it. I will upload image in vue js with laravel with preview.

That mean when you will select an image for uploading, you will see the preview before uploading it. I will use a fresh laravel 9 application to create this laravel 9 vue js image upload.

I will use image intervention package to manage image in controller and i will send image from client with base64 to controller and i will convert it to image using image intervention package. If you don't know how to upload image in Laravel 9 using vue js then this example is for you. 

Preview | Instant image showing and form validation



Step 1 : Install Laravel 

Now download a fresh laravel 9 project to create laravel vue image upload. You can also integrate it into your existing project. Run the below command to download laravel 9.

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


Step 2: Create Route

In this step, we need to create our route for image upload with vue js in laravel. 


use Illuminate\Support\Facades\Route;



Step 3 : Setup User Model

In this step, we have to update the user model like:


namespace App;

use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;

class User extends Authenticatable
    use Notifiable;

    protected $fillable = [

    protected $hidden = [
        'password', 'remember_token',

    protected $casts = [
        'email_verified_at' => 'datetime',



Step 4: Create Controller

Now we need to create auth controller to complete image upload using vue js in laravel 9 application. Now create auth controller and paste this below code.


namespace App\Http\Controllers;

use App\User;
use Carbon\Carbon;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\View;

class AuthController extends Controller

    public function process_signup(Request $request)
        $this->validate($request, [
            'username' => 'required',
            'avatar' => 'required'


            $name = time().'.' . explode('/', explode(':', substr($request->avatar, 0, strpos($request->avatar, ';')))[1])[1];
            $request->merge(['avatar' => $name]);
        $user = new User;
        $user->username = $request->username;
        $user->avatar = $name;
        return response()->json(
                'success' => true,
                'message' => 'User registered successfully'



Step 5 : Create Migration

Now we have to migrate our user's table. Open the user's migration file and paste the below code.


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


Read also : Laravel 7 Ajax Image Upload with Preview


now run php artisan migrate to migrate this table. Now time to set up vue dependencies. 


Step 6:  Vue Configuration

If you would like to install vue in your laravel 9 projects then run the following laravel ui composer package command to install.

composer require laravel/ui


and then install vue

php artisan ui vue


now we have to install npm

npm install


Now we have to install v-form in our project to validate form data before submitting. So install it

npm i axios vform


Step 7 : Configure app.js

Now open app.js file and paste this below code


window.Vue = require('vue');

//Import v-from
import { Form, HasError, AlertError } from 'vform'
window.Form = Form;
Vue.component(, HasError)
Vue.component(, AlertError)

Vue.component('register-component', require('./components/RegisterComponent.vue').default);

const app = new Vue({
    el: '#app',


Step 8 : Create Vue Component

Now we have to create a register component to write our view function. To create it and paste the following code to it.



Step 9:  Create Blade File

At last step, we will update our register.blade.php file. in this file we will use app.js file and use it, so let's update.


Step 9 :  Install Image Intervention

To install the most recent version, run the following command.

composer require intervention/image


After you have installed Intervention Image, open your Laravel config file config/app.php and add the following lines. In the $providers array add the service providers for this package.




Add the facade of this package to the $aliases array.

'Image' => Intervention\Image\Facades\Image::class


Now the Image Class will be auto-loaded by Laravel. You can publish configuration file by running below command:

php artisan vendor:publish --provider="Intervention\Image\ImageServiceProviderLaravelRecent"


Now we are ready to run our example app which is vue js laravel 9 image upload tutorial. Just one more thing.


Step 10 :  Create img/profile folder

Now we have to create img/profile directory in your public folder to store our image.

npm run watch


Read also : Laravel 6 REST API with JWT Authentication with CRUD


Hope it will work for you. If you face any errors, feel free to comment.


#laravel #laravel-9x #image-upload #vue-js