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-distGo into the app:
cd laravel-vue-carousel-slider-exampleConnect 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:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db
DB_USERNAME=root
DB_PASSWORD=Generate Model & Migration
Next step, we need to execute the following command on terminal:
php artisan make:model Slider -mPlace the below code in app/Models/Slider.php file:
<?php
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:
<?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) {
$table->bigIncrements('id');
$table->string('title');
$table->string('path');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('sliders');
}
}After defining sliders table values, run migration to add them into the database:
php artisan migrateInstall Vue Dependencies
In this step, you have to install Vue dependencies so run the command:
composer require laravel/ui
php artisan ui vueAfter that, install owl carousel dependencies by using the below command:
npm i -s vueRun command to compile your fresh scaffolding:
npm install && npm run devCreate & Set Up Controller
Next step, open command prompt and execute the following command to create a controller by an artisan:
php artisan make:controller SliderControllerAfter that, go to app\Http\Controllers and open SliderController.php file. Then update the following code into SliderController.php file:
<?php
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:
routes/web.php
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:
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<carousel>
<img class="img-fluid" v-for="(img, index) in images" :src="img.path" :key="index">
</carousel>
</div>
</div>
</div>
</template>
<script>
import carousel from "vue-owl-carousel";
export default {
components: {
carousel
},
name: "Owl Carousel",
props: {
msg: String
},
data() {
return {
images: []
}
},
created() {
this.axios
.get('http://localhost:8000/slider')
.then(response => {
this.images = response.data;
});
}
};
</script>Now open resources/assets/js/app.js and include the SliderComponent.vue component as follow:
require('./bootstrap');
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>
<html>
<head>
<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 - Tutsmake.com</title>
<script src="{{ asset('js/app.js') }}" defer></script>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
@stack('fontawesome')
</head>
<body>
<div id="app">
<main class="py-4">
@yield('content')
</main>
</div>
</body>
</html>Next, Navigate to resources/views/ and open welocome.blade.php. Then update the following code into welcome.blade.php file as follow:
@extends('layouts.app')
@section('content')
<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">
<slider-component></slider-component>
</div>
</div>
</div>
</div>
</div>
@endsection 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=SliderPut the below code in database\factories\SliderFactory.php:
<?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 tinkerNext, define the Slider model name with the factory() method and generate test data:
Slider::factory()->count(10)->create()Run Development Server
Thereafter, you have to open the console and run the node development server:
npm run watchOpen another console as well and start the laravel development server:
php artisan serveHere is the owl carousel slider integration example in Laravel and Vue js application:
http://127.0.0.1:8000Finally, 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.