DEV Community

Commoq
Commoq

Posted on

2 1 2

Creating a Stunning Blur Fade Animation in Vue/Nuxt

Have you ever wanted to add a sleek Blur Fade animation to your Vue/Nuxt application? Let’s walk through the process of setting up and implementing this cool effect.

Step 1: Setting Up Your Nuxt Project

First things first, you'll need to create a new Nuxt project. Open your terminal and run:

npx nuxi@latest init <project-name>

This command will initialize a new Nuxt project for you.

Step 2: Installing Dependencies

To get started with the Blur Fade animation, we need a few libraries. We'll be using Shadcn Vue and VueUse Motion.

Install Shadcn Vue

Shadcn Vue is a Vue port of the popular ShadcnUI component library. You can find the installation guide here. Follow the instructions to install it. Shadcn Vue will also install Tailwind CSS as part of the setup.

Install VueUse Motion

Run the following command to add VueUse Motion, which provides useful motion utilities for Vue:

npm install @vueuse/motion

Install Inspira UI Plugins

For additional functionality, you’ll also need to install the Inspira UI plugins:

npm install -D @inspira-ui/plugins

Step 3: Configuring Nuxt

Now, you need to configure Nuxt to recognize the new modules. Open your nuxt.config.ts file and add the following:

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/tailwindcss',
    'shadcn-nuxt',
    '@vueuse/motion/nuxt',
    '@nuxt/image'
  ],
  shadcn: {
    /**
     * Prefix for all the imported components
     */
    prefix: '',
    /**
     * Directory where the components are located.
     * @default "./components/ui"
     */
    componentDir: './components/ui'
  },
});
Enter fullscreen mode Exit fullscreen mode

Step 4: Setting Up Tailwind with Inspira UI

You need to configure Tailwind to use Inspira UI plugins. Open your tailwind.config.ts or tailwind.config.js and add the setupInspiraUI function:

import { setupInspiraUI } from '@inspira-ui/plugins';

export default {
  // Other Tailwind config options...
  plugins: [
    setupInspiraUI,
  ],
};
Enter fullscreen mode Exit fullscreen mode

Step 5: Adding the Blur Reveal Component

Visit the Inspira UI website and find the Blur Reveal component code here. Copy the code and create a new file BlurReveal.vue under components/inspira-ui/. Paste the copied code into this file.

Step 6: Using the Blur Reveal Component

To see the animation in action, create a dummy page, such as index.vue under the pages/ directory. Import the BlurReveal component and use it to wrap your HTML content:

<template>
  <BlurReveal :delay="0.5" :duration="0.5" yOffset="-10">
    <!-- Your content here -->
    <h1>Hello, World!</h1>
  </BlurReveal>
</template>

<script setup>
import BlurReveal from '~/components/inspira-ui/BlurReveal.vue';
</script>
Component Attributes:
Enter fullscreen mode Exit fullscreen mode

delay: Sets the delay before the animation starts.
duration: Specifies how long the animation lasts.
yOffset: Determines how far the component moves along the Y-axis.

And there you have it! You’ve set up a beautiful Blur Fade animation in your Vue/Nuxt app. Happy animating!

Top comments (1)

Collapse
 
rahul_vashishtha profile image
Rahul Vashishtha

Awesome !!!

Image of Bright Data

Ensure Data Quality Across Sources – Manage and normalize data effortlessly.

Maintain high-quality, consistent data across multiple sources with our efficient data management tools.

Manage Data