Lottie

Lottie анимацияларын empty states, қателер және басқа feedback surfaces ішінде жеңіл media ретінде қолданыңыз.

Толық ақпарат үшін: 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>