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'
  },
});

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,
  ],
};

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:

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!

Creating a Stunning Blur Fade Animation in Vue/Nuxt