https://github.com/xingxing-collective/splitpanes-nuxt
Vue 3 Splitpanes module for Nuxt
https://github.com/xingxing-collective/splitpanes-nuxt
components layout nuxt-module panel splitpanes vue3
Last synced: 4 months ago
JSON representation
Vue 3 Splitpanes module for Nuxt
- Host: GitHub
- URL: https://github.com/xingxing-collective/splitpanes-nuxt
- Owner: xingxing-collective
- Created: 2024-12-19T03:03:52.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-23T07:57:28.000Z (over 1 year ago)
- Last Synced: 2025-10-10T01:05:58.602Z (8 months ago)
- Topics: components, layout, nuxt-module, panel, splitpanes, vue3
- Language: TypeScript
- Homepage: https://stackblitz.com/edit/splitpanes-nuxt-playground
- Size: 102 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Splitpanes Nuxt Module
This module integrates the [Splitpanes](https://github.com/antoniandre/splitpanes) component with Nuxt 3.
## Installation
```bash
npx nuxi@latest module add splitpanes-nuxt
```
or with Yarn:
```bash
npx nuxi@latest module add splitpanes-nuxt
```
## Usage
In your `nuxt.config.ts` (or `nuxt.config.js`), add the module:
```javascript
export default {
modules: [
'splitpanes-nuxt'
]
}
```
With this configuration, you can now use the `Splitpanes` and `Pane` components in your project. If you want to add a prefix to these component names, you can add a `splitpanes` configuration to your `nuxt.config.ts`:
```javascript
export default {
modules: [
'splitpanes-nuxt'
],
splitpanes: {
prefix: 'MyPrefix'
}
}
```
This will allow you to use the components with a prefix, like so: ``, ``, etc.
## Further References
For detailed information about the Splitpanes component, its usage, options and events, please refer to the [official Splitpanes documentation](https://antoniandre.github.io/splitpanes/).
To contribute, submit issues or pull requests, visit the [Splitpanes GitHub repository](https://github.com/antoniandre/splitpanes).
## 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
```
[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=020420&colorB=00DC82
[npm-version-href]: https://npmjs.com/package/my-module
[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=020420&colorB=00DC82
[npm-downloads-href]: https://npm.chart.dev/my-module
[license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=020420&colorB=00DC82
[license-href]: https://npmjs.com/package/my-module
[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
[nuxt-href]: https://nuxt.com