Laravel 9 Vue Js Owl Carousel Slider Example Tutorial

Throughout this Laravel 9 Vue js owl carousel slider example tutorial, we are going to share step by step guide for how to integrate responsive image carousel slider dynamically with Vue js components in Laravel application using Owl carousel plugin.

Owl carousel is a popular open-source JavaScript based carousel slider; it offers numerous features for enhancing your content’s interactivity.

Laravel 9 Vue JS Owl Carousel Slider Example

This Laravel Vue js owl carousel slider example covers all the profound steps, respectively to dynamically fetch images from the database and display in slider using owl carousel slider in Laravel.

Follow the following steps to integrate and use owl carousel slider in laravel vue js apps:

  • Step 1: Install Laravel App
  • Step 2: Connect App to Database
  • Step 3: Generate Model And Migration
  • Step 4: Configuration NPM Module Packages
  • Step 5: Make Routes
  • Step 6: Create Controller
  • Step 7: Create Vue Component
  • Step 8: Create Blade Views & Initialize with Vue
  • Step 9: Generate Dummy Images Data
  • Step 10: Run Development Server

Install Laravel App

On the console, screen type the following command and hit enter to generate a new laravel project. You can ignore this step if the app is already installed:

composer create-project laravel/laravel laravel-vue-carousel-slider-example --prefer-dist

Go into the app:

cd laravel-vue-carousel-slider-example

Connect Database to App

After successfully install laravel new application, Go to project root directory and open .env file. Then set up database credential in .env file as follow:


Generate Model & Migration

Next step, we need to execute the following command on terminal:

php artisan make:model Slider -m

Place the below code in app/Models/Slider.php file:

namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
    use HasFactory;
    protected $guarded = [];

Add code in database/migrations/create_sliders_table.php:

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateSlidersTable extends Migration
     * Run the migrations.
     * @return void
    public function up()
       Schema::create('sliders', function (Blueprint $table) {
     * Reverse the migrations.
     * @return void
    public function down()

After defining sliders table values, run migration to add them into the database:

php artisan migrate

Install Vue Dependencies

In this step, you have to install Vue dependencies so run the command:

composer require laravel/ui
php artisan ui vue

After that, install owl carousel dependencies by using the below command:

npm i -s vue

Run command to compile your fresh scaffolding:

npm install && npm run dev

Create & Set Up Controller

Next step, open command prompt and execute the following command to create a controller by an artisan:

php artisan make:controller SliderController

After that, go to app\Http\Controllers and open SliderController.php file. Then update the following code into SliderController.php file:

namespace App\Http\Controllers;
use App\Models\Slider;
use Illuminate\Http\Request;
class SliderController extends Controller
    public function index(Request $request)
        $sliderImg = Slider::get();
        return response()->json($sliderImg);

Make Routes

Next step, go to routes folder and open web.php file and add the following routes into file:


use App\Http\Controllers\SliderController;
Route::get('slider', [SliderController::class, 'index']);

Create Vue Component

Next step, go to resources/assets/js/components folder and create a file called SliderComponent.vue.

Now, update the following code into SliderComponent.vue components file:

    <div class="container">
        <div class="row justify-content-center">
          <div class="col-md-8">
                <img class="img-fluid" v-for="(img, index) in images" :src="img.path" :key="index">
import carousel from "vue-owl-carousel";
export default {
  components: {
  name: "Owl Carousel",
  props: {
    msg: String
  data() {
      return {
          images: []
  created() {
          .then(response => {
              this.images =;

Now open resources/assets/js/app.js and include the SliderComponent.vue component as follow:

window.Vue = require('vue');
Vue.component('slider-component', require('./components/SliderComponent.vue').default);
const app = new Vue({
    el: '#app',

Create Blade Views And Initialize Vue Components

In this step, navigate to resources/views and create one folder named layouts. Inside this folder create one blade view file named app.blade.php file.

Next, Navigate to resources/views/layouts and open app.blade.php file. Then update the following code into app.blade.php file as follow:

<!doctype html>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Laravel 9 Vue JS Owl Carousel Slider Example -</title>
    <script src="{{ asset('js/app.js') }}" defer></script>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <div id="app">
        <main class="py-4">

Next, Navigate to resources/views/ and open welocome.blade.php. Then update the following code into welcome.blade.php file as follow:

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Laravel Vue JS Owl Carousel Slider Example</div>
                <div class="card-body">

Generate Dummy/Fake Images Data

This step explains to you how to create a custom factory class which is essential to generate the fake images data inside the database.

php artisan make:factory SliderFactory --model=Slider

Put the below code in database\factories\SliderFactory.php:

namespace Database\Factories;
use App\Models\Slider;
use Illuminate\Database\Eloquent\Factories\Factory;
class SliderFactory extends Factory
     * The name of the factory's corresponding model.
     * @var string
    protected $model = Slider::class;
     * Define the model's default state.
     * @return array
    public function definition()
        return [
            'title' => $this->faker->name,
            'path' => $this->faker->imageUrl(200, 180, 'cats', true, 'Faker')

Run command to enter into tinker Psy shell:

php artisan tinker

Next, define the Slider model name with the factory() method and generate test data:


Run Development Server

Thereafter, you have to open the console and run the node development server:

npm run watch

Open another console as well and start the laravel development server:

php artisan serve

Here is the owl carousel slider integration example in Laravel and Vue js application:

Finally, Laravel and Vue.js owl carousel slider tutorial is over. In this tutorial, you have learned how to create a dynamic carousel slider with the Vue js component in the Laravel application using the Owl carousel plugin.