Nuxt Nationカンファレンスが開催されます。11月12~13日にご参加ください。

locomotive-scroll
nuxt-locomotive-scroll

NuxtアプリケーションにLocomotive Scrollを簡単に統合できるNuxtモジュールです。

starter-kit-nuxt-locomotive-scroll nuxt v2 by DidoMarchetに感謝します。

Nuxt Locomotive Scroll

NuxtアプリケーションにLocomotive Scrollを簡単に統合できるNuxtモジュールです。

npm versionnpm downloadsLicenseNuxt

機能

  • 🚀  使いやすさ
  • 🎨  カスタマイズ

クイックセットアップ

1つのコマンドでモジュールをNuxtアプリケーションにインストールします

npx nuxi module add locomotive-scroll

これで、NuxtアプリケーションでNuxt Locomotive Scrollを使用できるようになりました。✨ または手動でインストールすることもできます。

# npm
npm install nuxt-locomotive-scroll

# yarn
yarn add nuxt-locomotive-scroll

# pnpm
pnpm add nuxt-locomotive-scroll

nuxt-locomotive-scrollmodulesセクションのnuxt.configに追加します。

export default defineNuxtConfig({
  modules: [
    'nuxt-locomotive-scroll',
  ],
})

使用方法

アニメーションする要素にv-locomotiveディレクティブを追加します。

<template>
  <div v-locomotive>
    <!-- Your content here -->
  </div>
</template>

プレイグラウンドで詳細な例を確認できます。

貢献

ローカル開発
# 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