{"id":15923,"library":"vue3-carousel-nuxt","title":"Vue 3 Carousel Nuxt Module","description":"vue3-carousel-nuxt is a Nuxt 3 module designed to seamlessly integrate the popular vue3-carousel component library into Nuxt 3 applications. It automates the setup process, registering the Carousel, Slide, Pagination, and Navigation components globally or with a user-defined prefix, and automatically includes the default carousel CSS styles, preventing duplicate imports. The current stable version is 1.1.6, with a recent history of active patch releases indicating ongoing maintenance and responsiveness to bug fixes since its initial release as v1.1.0. This module significantly simplifies the developer experience by abstracting away manual component registration and style management, allowing developers to focus directly on building interactive carousels within their Nuxt projects. Its primary differentiator is the deep integration with Nuxt's module system, providing a plug-and-play experience compared to manually adding and configuring the base vue3-carousel library.","status":"active","version":"1.1.6","language":"javascript","source_language":"en","source_url":"https://github.com/gaetansenn/vue3-carousel-nuxt","tags":["javascript","typescript"],"install":[{"cmd":"npm install vue3-carousel-nuxt","lang":"bash","label":"npm"},{"cmd":"yarn add vue3-carousel-nuxt","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue3-carousel-nuxt","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Provides the core carousel functionality that this Nuxt module integrates and exposes.","package":"vue3-carousel","optional":false}],"imports":[{"note":"Nuxt 3 modules are registered in `nuxt.config.ts`. The `carousel` object within the config is used for module-specific options like component prefixing.","wrong":"const vue3CarouselNuxt = require('vue3-carousel-nuxt');","symbol":"Vue3 Carousel Nuxt Module Configuration","correct":"export default defineNuxtConfig({\n  modules: [\n    'vue3-carousel-nuxt'\n  ],\n  carousel: {\n    prefix: 'MyCustom' // Optional: configure component prefix\n  }\n})"},{"note":"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.","wrong":"import { Carousel } from 'vue3-carousel'; // Not needed, components are auto-imported by the module.","symbol":"Carousel Component Usage (Template)","correct":"<Carousel />\n<Slide />\n<Pagination />\n<Navigation />"},{"note":"The module automatically imports the default `vue3-carousel` CSS. Override default styles in your own stylesheets without explicitly re-importing `carousel.css`.","wrong":"import 'vue3-carousel/dist/carousel.css'; // The module already imports this for you.","symbol":"Styling Carousel","correct":"/* In your CSS/SCSS file */\n.carousel__slide {\n  padding: 10px;\n}"}],"quickstart":{"code":"import { defineNuxtConfig } from 'nuxt';\n\n// nuxt.config.ts\nexport default defineNuxtConfig({\n  modules: [\n    'vue3-carousel-nuxt' // Add the module to your Nuxt configuration\n  ],\n  carousel: {\n    prefix: 'MyCustom' // Optional: prefix components to avoid naming conflicts\n  }\n});\n\n// app.vue or a page component (e.g., pages/index.vue)\n<template>\n  <div class=\"container\">\n    <h1>Featured Items Carousel</h1>\n    <MyCustomCarousel :items-to-show=\"1.5\" :wrap-around=\"true\" :transition=\"500\">\n      <MyCustomSlide v-for=\"slide in 8\" :key=\"slide\">\n        <div class=\"carousel__item\">Item {{ slide }}</div>\n      </MyCustomSlide>\n\n      <template #addons>\n        <MyCustomNavigation />\n        <MyCustomPagination />\n      </template>\n    </MyCustomCarousel>\n  </div>\n</template>\n\n<style>\n.container {\n  max-width: 900px;\n  margin: 0 auto;\n  padding: 20px;\n}\n.carousel__item {\n  min-height: 200px;\n  width: 100%;\n  background-color: #f0f0f0;\n  color: #333;\n  font-size: 24px;\n  border-radius: 8px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin: 10px;\n  box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n/* Example of overriding default carousel styles */\n.carousel__prev, .carousel__next {\n  background-color: #fff;\n  border-radius: 50%;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.2);\n  color: #333;\n  width: 48px; /* Custom size */\n  height: 48px; /* Custom size */\n}\n.carousel__pagination-button--active::after {\n  background-color: #007bff; /* Custom active pagination dot color */\n}\n</style>","lang":"typescript","description":"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."},"warnings":[{"fix":"Remove any explicit `import 'vue3-carousel/dist/carousel.css'` statements from your stylesheets or script files.","message":"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.","severity":"gotcha","affected_versions":">=1.1.0"},{"fix":"Ensure that if you configure `prefix: 'MyCustom'`, you use `<MyCustomCarousel />`, `<MyCustomSlide />`, etc., in your Vue templates.","message":"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.","severity":"gotcha","affected_versions":">=1.1.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.1.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Add `'vue3-carousel-nuxt'` to the `modules` array in your `nuxt.config.ts` file, for example: `export default defineNuxtConfig({ modules: ['vue3-carousel-nuxt'] })`.","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.","error":"Error: Nuxt module \"vue3-carousel-nuxt\" not found. Did you forget to add it to your `nuxt.config.ts`'s `modules` array?"},{"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.","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.","error":"[Vue warn]: Failed to resolve component: <Carousel>"}],"ecosystem":"npm"}