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.

Styling with the class prop

Components accept a class prop that is merged with the component's own classes using conflict resolution (like Nuxt UI): when two classes target the same utility, the one you pass via class wins instead of both being rendered.

<template>
  <!-- `gap-6` wins over the component's default `gap-3` -->
  <MMusicToggle class="gap-6" />
</template>

Styling priority is: component defaults < module/global config < component ui prop < class prop. Wrapper components that delegate to a Nuxt UI component (for example MButtonCopy around UButton) forward the class to the underlying component and inherit the same merge behaviour.

See Theming for the ui prop, app-wide app.config overrides and the per-component slot lists.

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.