Registry / web-framework / vue3-carousel-nuxt

vue3-carousel-nuxt

library1.1.6jsnpmunverified

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.

web-framework

npm install vue3-carousel-nuxt

github ↗package ↗

INSTALL

IMPORT

SIG · VUE3-CAROUSEL-NUXT

vue3-carousel-nuxt

web-frameworkjavascriptv1.1.6

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Vue3 Carousel Nuxt Module Configuration

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

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

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)

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

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

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

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

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

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

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>

Debug

Known issues

gotchaDo 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.

affects: >=1.1.0

gotchaWhen 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.

affects: >=1.1.0

gotchaThe 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.

affects: >=1.1.0

Errors

Common errors & fixes

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

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>

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.

Upgrade

Version history

1.1.6latest on npm

Audit

Dependencies

vue3-carouselrequiredProvides the core carousel functionality that this Nuxt module integrates and exposes.

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/gaetansenn/vue3-carousel-nuxt ↗

packagehttps://www.npmjs.com/package/vue3-carousel-nuxt ↗