Motion Block
Getting Started

Vue + Vite

Install Nuxt Motion Block in a plain Vue 3 app with Vite - components register through the Vue plugin.

Installation

Nuxt Motion Block works in any Vue 3 app — Vite, Laravel, AdonisJS — without Nuxt. app.use() registers every M* component globally, so you can use them in templates right away.

pnpm add nuxt-motion-block @nuxt/ui motion-v

Setup

Add the Nuxt UI Vite plugin in vite.config.ts:

vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui(),
  ],
})

Use the plugins in main.ts:

src/main.ts
import { createApp } from 'vue'
import ui from '@nuxt/ui/vue-plugin'
import motionBlock from 'nuxt-motion-block/vue-plugin'
import App from './App.vue'

const app = createApp(App)
app.use(ui)
app.use(motionBlock)
app.mount('#app')

Import Tailwind CSS with Nuxt UI and Nuxt Motion Block:

src/assets/css/main.css
@import "tailwindcss";
@import "@nuxt/ui";
@import "nuxt-motion-block/runtime/tailwind.css";

Usage

Every component is globally registered with the M prefix — the same name Nuxt's module registers under. Use them in templates:

src/App.vue
<template>
  <MTextShimmer placeholder="Works in plain Vue!" />
</template>

To override a component's theming (ui.<name> slot overrides, matching Nuxt UI's app.config.ts), pass it to the plugin:

src/main.ts
import motionBlock from 'nuxt-motion-block/vue-plugin'
import ui from '@nuxt/ui/vue-plugin'

app.use(ui)
app.use(motionBlock, {
  ui: {
    textShimmer: { root: 'font-mono' },
  },
})

Peer dependencies

PackageVersion
vue^3.5.0
@nuxt/ui>=4.11.2
motion-v>=2.4.4

Nuxt is not required. The Nuxt module is a separate entry point — see Installation for it.

AI Agents

Point coding agents at Nuxt Motion Block — the machine-readable docs this site publishes, its local MCP server, and the conventions an agent has to follow.

Laravel

Install Nuxt Motion Block in a Laravel + Inertia app - the same setup as Nuxt UI in Laravel.