vue3-carousel-nuxt

Vue3 Carousel Nuxt Module

This module integrates the Vue 3 Carousel component with Nuxt 3.

Installation

npx nuxi@latest module add vue3-carousel-nuxt

or with Yarn:

npx nuxi@latest module add vue3-carousel-nuxt

Usage

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.

Styling

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.

Further References

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.

Contribution

Local development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release

Changelog

v1.1.3

compare changes

🩹 Fixes

• Remove alias esm resolution handled in 0.3.4 and update packages (498ab60)
• Fix linter (96ab060)

❤️ Contributors

• Gaetan SENN (@gaetansenn)