Vue 3 Carousel Nuxt Module

Common errors

• Error: Nuxt module "vue3-carousel-nuxt" not found. Did you forget to add it to your `nuxt.config.ts`'s `modules` array?

  cause The `vue3-carousel-nuxt` module has not been added to the `modules` array in your `nuxt.config.ts` file, preventing Nuxt from discovering and loading it.
  fix Add `'vue3-carousel-nuxt'` to the `modules` array in your `nuxt.config.ts` file, for example: `export default defineNuxtConfig({ modules: ['vue3-carousel-nuxt'] })`.

• [Vue warn]: Failed to resolve component: <Carousel>

  cause The `Carousel` component (or any other `vue3-carousel` component) is not recognized by Vue. This typically happens if the `vue3-carousel-nuxt` module is not correctly configured or loaded, or if a prefix is used but not applied to the component name.
  fix Verify that `vue3-carousel-nuxt` is listed in your `nuxt.config.ts` `modules` array. If you have a `carousel.prefix` configured, ensure you are using the prefixed component name (e.g., `<MyCustomCarousel />`). Clear your Nuxt build cache (`.nuxt` and `node_modules/.cache`) and restart the development server.

Warnings

• gotcha Do not manually import `vue3-carousel/dist/carousel.css` in your project. The module automatically handles the import of the default styles. Explicitly importing it again can lead to duplicated styles or unexpected CSS cascade issues.
  Fix: Remove any explicit `import 'vue3-carousel/dist/carousel.css'` statements from your stylesheets or script files.
• gotcha When using the `carousel.prefix` option in `nuxt.config.ts`, all `vue3-carousel` components (e.g., `Carousel`, `Slide`, `Pagination`, `Navigation`) will have this prefix applied. Forgetting the prefix in your templates will result in 'Failed to resolve component' errors.
  Fix: Ensure that if you configure `prefix: 'MyCustom'`, you use `<MyCustomCarousel />`, `<MyCustomSlide />`, etc., in your Vue templates.
• gotcha The module automatically registers the `vue3-carousel` components. Avoid manually importing `Carousel`, `Slide`, etc., from `vue3-carousel` directly in your SFCs after configuring this Nuxt module, as it can lead to redundant component registrations or conflicts.
  Fix: Rely on Nuxt's auto-import feature for the components provided by this module. Remove any explicit `import { Carousel } from 'vue3-carousel'` statements from your Vue components.

Install

• npm install vue3-carousel-nuxt npm
• yarn add vue3-carousel-nuxt yarn
• pnpm add vue3-carousel-nuxt pnpm

Imports

• Vue3 Carousel Nuxt Module Configuration
  wrong:

  const vue3CarouselNuxt = require('vue3-carousel-nuxt');

  correct:

  export default defineNuxtConfig({
    modules: [
      'vue3-carousel-nuxt'
    ],
    carousel: {
      prefix: 'MyCustom' // Optional: configure component prefix
    }
  })

  Nuxt 3 modules are registered in `nuxt.config.ts`. The `carousel` object within the config is used for module-specific options like component prefixing.
• Carousel Component Usage (Template)
  wrong:

  import { Carousel } from 'vue3-carousel'; // Not needed, components are auto-imported by the module.

  correct:

  <Carousel />
  <Slide />
  <Pagination />
  <Navigation />

  Components like `Carousel`, `Slide`, `Pagination`, and `Navigation` are automatically made available globally (or with a specified prefix) by the module. Direct imports are generally not required in your Vue SFCs.
• Styling Carousel
  wrong:

  import 'vue3-carousel/dist/carousel.css'; // The module already imports this for you.

  correct:

  /* In your CSS/SCSS file */
  .carousel__slide {
    padding: 10px;
  }

  The module automatically imports the default `vue3-carousel` CSS. Override default styles in your own stylesheets without explicitly re-importing `carousel.css`.

Quickstart

This quickstart demonstrates how to configure the `vue3-carousel-nuxt` module in `nuxt.config.ts` and effectively use the auto-imported carousel components with a custom prefix in a Vue template, alongside examples of styling overrides.

import { defineNuxtConfig } from 'nuxt';

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    'vue3-carousel-nuxt' // Add the module to your Nuxt configuration
  ],
  carousel: {
    prefix: 'MyCustom' // Optional: prefix components to avoid naming conflicts
  }
});

// app.vue or a page component (e.g., pages/index.vue)
<template>
  <div class="container">
    <h1>Featured Items Carousel</h1>
    <MyCustomCarousel :items-to-show="1.5" :wrap-around="true" :transition="500">
      <MyCustomSlide v-for="slide in 8" :key="slide">
        <div class="carousel__item">Item {{ slide }}</div>
      </MyCustomSlide>

      <template #addons>
        <MyCustomNavigation />
        <MyCustomPagination />
      </template>
    </MyCustomCarousel>
  </div>
</template>

<style>
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}
.carousel__item {
  min-height: 200px;
  width: 100%;
  background-color: #f0f0f0;
  color: #333;
  font-size: 24px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
/* Example of overriding default carousel styles */
.carousel__prev, .carousel__next {
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  color: #333;
  width: 48px; /* Custom size */
  height: 48px; /* Custom size */
}
.carousel__pagination-button--active::after {
  background-color: #007bff; /* Custom active pagination dot color */
}
</style>