Introduction

Integrating a carousel into your Nuxt 3 project enhances the visual appeal and user engagement of your website. Splide, a lightweight and flexible carousel library, is an excellent choice for this purpose. Here’s a detailed guide on how to install and use Splide Carousel in Nuxt 3.

Step 1: Install @splidejs/vue-splide

First, add Splide to your project by running:

npm install @splidejs/vue-splide

This command installs the necessary packages to get started with Splide in a Vue 3 environment.

Step 2: Create a Splide Plugin

Set up a Splide plugin to integrate it with Vue. Create a file splide.client.js in the plugins directory and add the following code:

import Splide from '@splidejs/vue-splide';
import '@splidejs/vue-splide/css/core'; // Import Splide CSS

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(Splide); // Register Splide as a Vue plugin
});

This code imports Splide and its core CSS, then registers Splide as a Vue plugin within your Nuxt application.

Step 3: Create a Splide Component

Create a new Vue component for the carousel. Here’s a basic example:

<template>
    <div class="section">
        <splide :options="splideOptions">
            <splide-slide v-for="(image, index) in images" :key="index">
                <img 
                    :src="image.src" 
                    :alt="image.alt" 
                    :data-splide-lazy="image.src" 
                    class="image" 
                />
            </splide-slide>
        </splide>
    </div>
</template>

<script>
import { Splide, SplideSlide } from '@splidejs/vue-splide';

export default defineComponent({
    components: {
        Splide,
        SplideSlide,
    },
    data() {
        return {
            images: [
                {
                    src: 'https://images.unsplash.com/photo-1682685797742-42c9987a2c34?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHx8',
                    alt: 'Image 1',
                },
                {
                    src: 'https://images.unsplash.com/photo-1702660357345-0740e367332b?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHx8',
                    alt: 'Image 2',
                },
            ],
            splideOptions: {
                type: 'slide',
                perPage: 1,
                lazyLoad: 'nearby',
                snap: true,
                autoHeight: true,
                autoPlay: true,
                cover: true,
                pagination: true,
                arrows: true,
                height: '90vh',
                animationDuration: 1000,
                breakpoints: {
                    640: {
                        height: '50vh',
                    },
                    768: {
                        height: '70vh',
                    },
                },
            },
        };
    },
});
</script>

<style scoped>
.section {
    /* Add your section styles here */
    border-radius: 10px;
}

.image {
    width: 100%;
    object-fit: cover;
}
</style>

This component uses the <splide> and <splide-slide> components to create the carousel. Customize images and splideOptions according to your requirements.

Step 4: Use the Component in a Page

Finally, import and use this component in your Nuxt pages where you want the carousel to appear:

<template>
  <!-- Your page content -->
  <YourSplideComponent />
</template>

Replace YourSplideComponent with the name of your Splide component.

Conclusion

Splide provides a powerful yet simple way to add carousels to your Nuxt 3 projects. By following these steps, you can easily incorporate visually appealing carousels into your website, enhancing the overall user experience.

💡 Pro Tip: Remember to customize the styles and options to align with your site’s design and functionality requirements.

Happy coding! 🚀