Nuxt3 + Vuetify3 で割り勘サイト作ってみる(寄り道編:Lottie）

はじめに

Nuxt3 + Vuetify3で割り勘サイトを作ってみるシリーズの後続編。
とりあえず、楽して見た目を良くしたい。。。アニメーションを入れてみる。
昔ネイティブアプリ開発中に使ってたLottie使えないかな。。。

パッケージを追加

vue3用のLottieパッケージ発見！

"nuxt": "^2.15.8",
"vuetify": "^2.6.10",
"vue3-lottie": "^3.2.0", <-- 追加した

1.Hello Lottie!

やっぱりいつも通りで、、、
やり方は公式通りで、Get Started を参照

npm install vue3-lottie@latest --save

nuxt3の使い方は。。。公式にある！！ありがとう。
Usage with Nuxt3

ⅰ pluginsに追加

plugins/Vue3Lottie.client.ts

import { Vue3Lottie } from 'vue3-lottie'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('Vue3Lottie', Vue3Lottie)
})

ⅱ script setupに宣言 + コンポーネントの定義 + jsonファイル指定

※事前にLottie公式 からアニメーションファイル(json)を入手して、assetsフォルダに anime.jsonを格納済み
公式にあるように つけないとダメみたい。

pages/index.vue

<script setup lang="ts">
import { Vue3Lottie } from 'vue3-lottie'
import animejson from "~/assets/lottie/anime.json";
</script>

<template>
    <v-container>
        <v-row>
            <v-col cols="12">
                <client-only>
                    <Vue3Lottie
                    :animationData="animejson"
                    :loop="true"
                    :height="200"
                    :width="200"
                    />
                </client-only>
            </v-col>
        </v-row>
    </v-container>
</template>

👏動いた！