Lottie

Используйте Lottie-анимации как легкие media внутри empty states, ошибок и других feedback surfaces.

Для более подробной информации перейдите в документацию Nuxt Lottie.

Установка

npx nuxi module add lottie

Конфигурация

nuxt.config.ts

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

Скачайте JSON-анимацию из Lottie и положите ее в app/assets/lottie.

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

Примеры файлов в этом проекте: app/assets/lottie/error.json и app/assets/lottie/success.json.

Использование

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

С Empty

Страница не найдена

Страница, которую вы ищете, не существует или была перемещена.

<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>