Json Lottie Animations & Custom Error Pages in Nuxt

Json Lottie Animations & Custom Error Pages in Nuxt

We’re going to take our 404 Not Found CSE error page to the next level with Lottie animations. Here’s how you can do it, step by step.

What is Lottie?

Lottie animations are lightweight and scalable, making them ideal for web use. These animations can include complex vector graphics and are highly efficient in terms of performance compared to traditional image or GIF animations. Lottie files are also interactive and customizable, making them a powerful tool for web designers and developers.

Using Lottie Animations in Vue Nuxt Projects with vue3-lottie

Integrating Lottie animations into Vue and Nuxt projects is straightforward with the help of the vue3-lottie library. This library provides a simple and efficient way to render Lottie animations in Vue 3 applications.

Step-by-Step Guide to Using Lottie Animations in Vue/Nuxt Projects

Installing vue3-lottie

Let’s install the vue3-lottie package to our exist project.

`

npm install vue3-lottie@latest
yarn add vue3-lottie@latest
pnpm add vue3-lottie@latest

`

Importing vue3-lottie

Create a folder called plugins at the root of your project and rifght after create a file named Vue3Lottie.client.ts inside the plugins directory.

Also let’s add our error.json animated lottie to our assetsfolder under the animations folder.

| assets/
| |- animations/
| | |- error.json
| pages/
| |- index.js
| plugins/
| |- Vue3Lottie.client.ts
|- app.vue
|- error.vue
|- nuxt.config.ts
|- package.json

Add the following code to the file.

./plugins/Vue3Lottie.client.ts

    import { Vue3Lottie } from 'vue3-lottie'
    export default defineNuxtPlugin((nuxtApp) => {  
    nuxtApp.vueApp.component('Vue3Lottie', Vue3Lottie)})

Now let’s use the our animation in our error.vue page!

error.vue

    <template>
      <div class="text-center">
        <h1 class="text-6xl">404</h1>
        <h2 >Page Not Found</h2>
        <ClientOnly>
          <Vue3Lottie :animation-data="animation" :height="height" :width="width" />
        </ClientOnly>
        <button @click="redirect" class="text-3xl">Back to menu</button>
      </div>
    </template>

    <script >
    import { Vue3Lottie } from "vue3-lottie";
    import NotFound from "/assets/animations/error.json";

    export default {
      components: { Vue3Lottie },
      data() {
        return {
          animation: NotFound,
          height: 500,
          width: 1300,
        };
      },
      methods: {
        redirect() {
          window.location.href = "/";
        },
        error() {
          return useError();
        },
      },
    };
    </script>

And the output be like,

Let your creative mind to explore new possibilities!

See you in the next article!

References

• https://vue3-lottie.vercel.app/introduction/nuxt-3