Usage

Module Configuration

Nuxt Motion Block accepts the following options:

Configure the module in your nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    '@nuxt/ui',
    'motion-v/nuxt',
    'nuxt-motion-block'
  ],
  motionBlock: {
    prefix: 'M' // Default prefix, can be customized
  }
})

Component Usage

All components are automatically registered with the configured prefix (M by default). You can use them directly in your templates:

<template>
  <MAnimatedBackground>
    <h1>Welcome to Nuxt Motion Block</h1>
    <MTextGlitch text="Enhanced UI" />
  </MAnimatedBackground>
</template>

CSS Inclusion

The module automatically includes its CSS via the module configuration. You don't need to manually import any CSS files.

Component Prefix

By default, all components are prefixed with M. For example:

• MAnimatedBackground instead of AnimatedBackground
• MTextGlitch instead of TextGlitch
• MDock instead of Dock

You can customize this prefix in the module configuration:

export default defineNuxtConfig({
  modules: [
    '@nuxt/ui',
    'motion-v/nuxt',
    'nuxt-motion-block'
  ],
  motionBlock: {
    prefix: 'Motion' // Components will be available as MotionAnimatedBackground, etc.
  }
})

Using Composables

Nuxt Motion Block also provides several composables that can be used in your components:

<template>
  <canvas ref="canvasRef" class="fixed inset-0 pointer-events-none z-50" />
</template>

<script setup>
import { ref } from 'vue'
import { useCanvasCursor } from '#imports'

const canvasRef = ref()
useCanvasCursor(canvasRef, { color: 'primary' })
</script>

All composables are auto-imported and available globally in your Nuxt application.

Performance Considerations

Components are optimized for performance using:

• Throttling for mouse events
• Efficient animation libraries (motion-v)
• Vue reactivity optimizations
• Lazy loading where appropriate

For best performance, only import the components you actually use in your application.