This module integrates the Vue 3 Carousel component with Nuxt 3.
npm install vue3-carousel-nuxt
or with Yarn:
yarn add vue3-carousel-nuxt
In your nuxt.config.ts
(or nuxt.config.js
), add the module:
export default {
modules: [
'vue3-carousel-nuxt'
]
}
With this configuration, you can now use the Carousel
, Slide
, Pagination
, and Navigation
components in your project. If you want to add a prefix to these component names, you can add a carousel
configuration to your nuxt.config.ts
:
export default {
modules: [
'vue3-carousel-nuxt'
],
carousel: {
prefix: 'MyPrefix'
}
}
This will allow you to use the components with a prefix, like so: <MyPrefixCarousel />
, <MyPrefixSlide />
, etc.
The module automatically imports the default styles of Vue 3 Carousel. If you want to customize the styles, you can override them in your own style sheets:
/* Override Carousel styles in your CSS or SCSS files */
.carousel__slide {
/* Your custom styles here */
}
Remember, you don't need to import the carousel.css
again in your stylesheets, as the module already imports it. Simply write your custom styles in your CSS files.
For detailed information about the Vue 3 Carousel component, its usage, options and events, please refer to the official Vue 3 Carousel documentation.
To contribute, submit issues or pull requests, visit the Vue 3 Carousel GitHub repository.