https://github.com/gaetansenn/vue3-carousel-nuxt
This module seamlessly integrates the Vue 3 Carousel component into Nuxt.js applications.
https://github.com/gaetansenn/vue3-carousel-nuxt
Last synced: 6 months ago
JSON representation
This module seamlessly integrates the Vue 3 Carousel component into Nuxt.js applications.
- Host: GitHub
- URL: https://github.com/gaetansenn/vue3-carousel-nuxt
- Owner: gaetansenn
- Created: 2023-07-19T15:31:58.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2025-01-17T13:07:47.000Z (9 months ago)
- Last Synced: 2025-03-29T12:07:41.296Z (6 months ago)
- Language: TypeScript
- Size: 521 KB
- Stars: 38
- Watchers: 2
- Forks: 8
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Vue3 Carousel Nuxt Module
This module integrates the [Vue 3 Carousel](https://github.com/ismail9k/vue3-carousel) component with Nuxt 3.
## Installation
```bash
npx nuxi@latest module add vue3-carousel-nuxt
```
or with Yarn:
```bash
npx nuxi@latest module add vue3-carousel-nuxt
```
## Usage
In your `nuxt.config.ts` (or `nuxt.config.js`), add the module:
```javascript
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`:
```javascript
export default {
modules: [
'vue3-carousel-nuxt'
],
carousel: {
prefix: 'MyPrefix'
}
}
```
This will allow you to use the components with a prefix, like so: ``, ``, 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:
```css
/* 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](https://ismail9k.github.io/vue3-carousel/).
To contribute, submit issues or pull requests, visit the [Vue 3 Carousel GitHub repository](https://github.com/ismail9k/vue3-carousel).
## Contribution
Local development
```bash
# 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
```