A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/megasanjay/vue3-lottie below:

megasanjay/vue3-lottie: A simple Vue 3 component for using Lottie animations in Vue 3

Add Lottie animations to your Vue 3 or Nuxt 3 application.

Explore the documentation ยป

vue3-lottie was created to help developers add Lottie animations to their Vue 3 applications. In my search for a simple way to add Lottie animations to my Vue application I found a suprising lack of maintained solutions. vue3-lottie is a vue wrapper around the lottie-web library with a few additional features.

View the live demos here: https://vue3-lottie.vercel.app

If you are using version 2.x of vue3-lottie you should upgrade to version 3.x. You can do this by running the Installation and Usage command below. This add better support for Typescript. There is also a change with the dist/style.css import (it's been removed) so take a look at the new documentation for instructions on how to migrate to this package.

If you are using npm:

npm install vue3-lottie@latest --save

If you are using yarn:

yarn add vue3-lottie@latest

The most common use case is to register the component globally.

// main.js
import { createApp } from 'vue'
import Vue3Lottie from 'vue3-lottie'

createApp(App).use(Vue3Lottie).mount('#app')

If you get an error with TS, try use(Vue3Lottie, { name: "Vue3Lottie" })

To define global components for Volar type-checking you will need to add:

// components.d.ts
declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    LottieAnimation: typeof import('vue3-lottie')['Vue3Lottie']
  }
}
export {}

If needed rename component to use:

app.use(Vue3Lottie, { name: 'LottieAnimation' }) // use in template <LottieAnimation />

Alternatively you can also import the component locally.

import { Vue3Lottie } from 'vue3-lottie'

export default {
  components: {
    Vue3Lottie,
  },
}

You can then use the component in your template

<template>
  <Vue3Lottie :animationData="AstronautJSON" :height="200" :width="200" />
</template>

<script>
import { Vue3Lottie } from 'vue3-lottie'

import AstronautJSON from './astronaut.json'

export default {
  components: {
    Vue3Lottie,
  },
  data() {
    return {
      AstronautJSON,
    }
  },
}
</script>

This is still experimental. Will be updated soon.

If you are using npm:

npm install vue3-lottie@latest --save

If you are using yarn:

yarn add vue3-lottie@latest
import { Vue3Lottie } from 'vue3-lottie'

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

If you get an error with TS, try component(Vue3Lottie, { name: "Vue3Lottie" })

This should register as a global component that you can call anywhere in your app under the tag.

I would recommend using a <client-only> parent tag to ensure that the animation only loads in on the client side.

<client-only>
  <Vue3Lottie
    animationLink="https://assets10.lottiefiles.com/packages/lf20_soCRuE.json"
    :height="200"
    :width="200"
  />
</client-only>

More detailed explanations are provided in the documentation.

Prop Type Default Value Description animationData Object {} The lottie animation data provided as a JSON object animationLink String '' A URL link to the Lottie animation data (eg: Lottie Animation URL on lottiefiles.com) width Number or String "100%" Width of the lottie animation container (Numbers correspond to pixel values) height Number or String "100%" Height of the lottie animation container (Numbers correspond to pixel values) speed Number "1" Speed of the lottie animation direction String "forward" Animation play direction loop Number or Boolean true The number of instances that the lottie animation should run (true is infinite) autoPlay Boolean true Start animation on component load delay Number 0 Delay the animation play state by some milliseconds pauseAnimation Boolean false Prop to pass reactive variables so that you can control animation pause and play pauseOnHover Boolean false Whether to pause the animation on hover playOnHover Boolean false Whether to play the animation when you hover backgroundColor String transparent Background color of the container noMargin Boolean false Prevent the lottie from auto centering in the container. This gives you better control on placement within your UI scale Number 1 Scale the animation (might cause blurriness) assetsPath String "" URL to the image asset you need to use in your Lottie animation renderer String "svg" Set the renderer rendererSettings Object {} Options for if you want to use an existing canvas to draw (can be ignored on most cases)

A few events are emitted from the component. Look at the Demos for examples.

You can control the animation with the following methods. These methods can be called by assigning a ref value to the vue3-lottie component. Look at the Demos for examples.

A big thank you goes to @reslear for adding Typescript support to this library. Go check out his profile and give him a follow!

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4