ZvLottiePlayer
ZvLottiePlayer is a standalone component to load and display lottie animations
INFO
Before you have to import the global css files in your project, follow instructions in Getting Started
Prerequisites
To use this component you need to install this dependency @lottiefiles/lottie-player
bash
npm install @lottiefiles/lottie-player@1.7 -DVue & Nuxt installation and configuration steps
Vue
- Import Lottie Player
In main.{js,ts}
js
import '@lottiefiles/lottie-player'2 - Declare <lottie-player /> tag as a custom web component to avoid warnings
vite.config.{ts, js}
ts
import { defineConfig, loadEnv } from 'vite'
export default () => {
return defineConfig({
...
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: (tag: string) => ['lottie-player'].includes(tag)
}
}
})
]
...
})
}Nuxt
- Add a plugin named
lottie-player.client.{js, ts}, it's important to use***.client.*
ts
export default defineNuxtPlugin(() => {
import('@lottiefiles/lottie-player')
})2 - Declare <lottie-player /> tag as a custom web component to avoid warnings
In nuxt.config.{js, ts}
ts
export default defineNuxtConfig({
vue: {
compilerOptions: {
isCustomElement: (tag: string) => ['lottie-player'].includes(tag),
},
},
})Basic usage
vue
<template>
<ZvLottiePlayer src="/lottie/loader_dark.json" />
<div class="p-4 bg-brand">
<ZvLottiePlayer :src="LoaderWhite" />
</div>
</template>
<script lang="ts" setup>
import ZvLottiePlayer from '@zadigetvoltaire/ui/components/ZvLottiePlayer'
import LoaderWhite from './../lottie/loader_light.json'
</script>