Lottie

Use Lottie animations as lightweight media inside empty states, errors and other feedback surfaces.

For more detailed information, visit the Nuxt Lottie documentation.

Installation

npx nuxi module add lottie

Configuration

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['nuxt-lottie'],
  lottie: {
    componentName: 'Lottie',
    lottieFolder: '/assets/lottie',
    autoFolderCreation: true,
  },
})

Download animation JSON from Lottie and place it in app/assets/lottie.

app/
  assets/
    lottie/
      error.json
      success.json

Example files in this project: app/assets/lottie/error.json and app/assets/lottie/success.json.

Usage

<template>
  <Lottie name="error" :loop="false" width="160px" height="140px" />
</template>

With Empty

Page not found

The page you are looking for does not exist or has been moved.

<template>
  <Empty
    title="Page not found"
    description="The page you are looking for does not exist or has been moved."
    button="Go home"
    @action="navigateTo('/')"
  >
    <div
      class="flex size-28 items-center justify-center rounded-4xl bg-secondary text-primary"
    >
      <Lottie name="error" :loop="false" width="140px" height="140px" />
    </div>
  </Empty>
</template>