Nuxt Animeモジュール

Nuxt向けのアニメーションモジュール。

機能

Anime.jsアニメーションライブラリの統合を支援します。
メインのanimeヘルパーをグローバルに提供します。
カスタムコンポーザブルをサポートします。
ゼロコンフィグ設定で即使用可能です。
TypeScript対応
非常に使いやすい

クイックスタート

プロジェクトに@hypernym/nuxt-animeをインストールします。

npm i -D @hypernym/nuxt-anime

メイン設定ファイルでモジュールを有効にします。

// nuxt.config.ts

{
  modules: ['@hypernym/nuxt-anime']
}

これで完了です！アプリの開発を開始しましょう！

モジュール

このモジュールはゼロコンフィグ設定で提供されるため、有効化後、Anime.jsコアが自動的に追加され、追加設定なしでグローバルに使用できます。

<!-- layout.vue | page.vue | component.vue -->

<template>
  <div>
    <h1 class="title">Nuxt Anime</h1>
  </div>
</template>

<script setup lang="ts">
  const { $anime } = useNuxtApp()

  onMounted(() => {
    $anime({ targets: '.title', translateX: 250, duration: 800 })
  })
</script>

オプション

Nuxt Animeモジュールは最適化されており、TypeScriptを使用したNuxt 3をサポートしています。詳細な説明、例、コードの自動補完により、開発エクスペリエンスも向上しています。

// nuxt.config.ts

{
  modules: ['@hypernym/nuxt-anime'],

  anime: {
    // Module options
  }
}

Provide

型: boolean
デフォルト: true

メインの$animeヘルパーをグローバルに提供します。

// nuxt.config.ts

{
  anime: {
    provide: true
  }
}

グローバルに使用可能

const { $anime } = useNuxtApp()

$anime({ targets: '.class', translateX: 250, duration: 800 })

コンポーザブル

型: boolean
デフォルト: undefined

カスタムコンポーザブルを指定します。

有効にすると、カスタムコンポーザブルの使用が可能になります。

// nuxt.config.ts

{
  anime: {
    composables: true
  }
}

useAnime

メインのanime関数をカスタムコンポーザブルとして提供します。

<script setup lang="ts">
  onMounted(() => {
    useAnime({ targets: '.class', translateX: 250, duration: 800 })
  })
</script>

// Explicit import (optional)
import { useAnime } from '#anime'

自動インポート

型: boolean
デフォルト: true

auto-import機能を指定します。

有効にすると、コンポーザブルはグローバルに使用できるようになり、手動でインポートする必要がなくなります。

これは意見の強い機能であるため、グローバルauto-importを無効にして、必要な場所でのみ明示的なインポートを使用することもできます。

composables: trueオプションが有効になっている場合のみ機能します。

// nuxt.config.ts

{
  anime: {
    autoImport: false
  }
}

コミュニティ

その他ご質問は、公式ディスカッションをご利用ください。

ライセンス

Anime.jsライブラリ

Anime.jsライセンスの詳細については、公式リポジトリをご覧ください。

Nuxt Animeモジュール

🇭🇷クロアチアで開発

MITライセンスで公開。