Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/arashsheyda/nuxt-locomotive-scroll
A Nuxt module to easily integrate Locomotive Scroll into your Nuxt application.
https://github.com/arashsheyda/nuxt-locomotive-scroll
Last synced: 21 days ago
JSON representation
A Nuxt module to easily integrate Locomotive Scroll into your Nuxt application.
- Host: GitHub
- URL: https://github.com/arashsheyda/nuxt-locomotive-scroll
- Owner: arashsheyda
- Created: 2024-05-26T23:22:14.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-05-27T17:50:30.000Z (6 months ago)
- Last Synced: 2024-10-04T17:38:54.891Z (about 1 month ago)
- Language: Vue
- Homepage:
- Size: 114 KB
- Stars: 9
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
> thanks to [starter-kit-nuxt-locomotive-scroll nuxt v2](https://github.com/DidoMarchet/starter-kit-nuxt-locomotive-scroll) by [DidoMarchet](https://github.com/DidoMarchet/)
# Nuxt Locomotive Scroll
A Nuxt module to easily integrate [Locomotive Scroll](https://github.com/locomotivemtl/locomotive-scroll) into your Nuxt application.
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]
- [✨ Release Notes](/CHANGELOG.md)
- [🏀 Online playground](https://stackblitz.com/github/arashsheyda/nuxt-locomotive-scroll?file=playground%2Fapp.vue)
- [📖 Documentation](https://docs.arashsheyda.me/nuxt-locomotive-scroll)
## Features
- 🚀 Easy to use
- 🎨 Customizable
## Quick Setup
Install the module to your Nuxt application with one command:
```bash
npx nuxi module add locomotive-scroll
```
That's it! You can now use Nuxt Locomotive Scroll in your Nuxt app ✨ or you can install it manually:
```bash
# npm
npm install nuxt-locomotive-scroll
# yarn
yarn add nuxt-locomotive-scroll
# pnpm
pnpm add nuxt-locomotive-scroll
```
and add `nuxt-locomotive-scroll` to the `modules` section of `nuxt.config`.
```ts
export default defineNuxtConfig({
modules: [
'nuxt-locomotive-scroll',
],
})
```
## Usage
Just add `v-locomotive` directive to the element you want to animate.
```vue
```
you can check the [playground](https://github.com/arashsheyda/nuxt-locomotive-scroll/tree/main/playground) for more examples.
## 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/nuxt-locomotive-scroll/latest.svg?style=flat&colorA=020420&colorB=00DC82
[npm-version-href]: https://npmjs.com/package/nuxt-locomotive-scroll
[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-locomotive-scroll.svg?style=flat&colorA=020420&colorB=00DC82
[npm-downloads-href]: https://npmjs.com/package/nuxt-locomotive-scroll
[license-src]: https://img.shields.io/npm/l/nuxt-locomotive-scroll.svg?style=flat&colorA=020420&colorB=00DC82
[license-href]: https://npmjs.com/package/nuxt-locomotive-scroll
[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
[nuxt-href]: https://nuxt.com