Documentation

Vue and Nuxt

Install and configure the stable Motionwind v2 adapter for Vue/Vite and Nuxt.

Vue and Nuxt

The stable Vue adapter maps shared parser output to Motion for Vue.

npm install motionwind-vue@2 motion-v @vueuse/core motionwind-core@2

Vue with Vite

Use a configured node transform for typed tokens and presets, then install the plugin with the same config:

// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { createMotionwindTransform } from "motionwind-vue/vite";
import motionwindConfig from "./motionwind.config";

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          nodeTransforms: [createMotionwindTransform(motionwindConfig)],
        },
      },
    }),
  ],
});

// main.ts
import { createApp } from "vue";
import { MotionwindPlugin } from "motionwind-vue";
import App from "./App.vue";
import motionwindConfig from "../motionwind.config";

createApp(App).use(MotionwindPlugin, motionwindConfig).mount("#app");

Static class attributes on native elements are transformed. Dynamic :class values use <Motionwind>, mw.*, or useMotionwind.

Nuxt

// plugins/motionwind.ts
import { MotionwindPlugin } from "motionwind-vue";
import motionwindConfig from "../motionwind.config";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(MotionwindPlugin, motionwindConfig);
});

<Motionwind
  as="button"
  class="animate-hover:scale-105 animate-tap:scale-95 animate-focus:scale-102"
>
  Save
</Motionwind>

Vue supports gestures, in-view, drag, layout, variants, SVG, and reduced-motion handling. Continuous animate-scroll:* classes report an adapter warning; use Motion for Vue's scroll composables directly until the capability is promoted.