Laravel

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    laravel({
      input: ['resources/js/app.ts'],
      refresh: true,
    }),
    vue({
      template: {
        transformAssetUrls: {
          base: null,
          includeAbsolute: false,
        },
      },
    }),
    ui(),
  ],
})

import { createInertiaApp } from '@inertiajs/vue3'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
import ui from '@nuxt/ui/vue-plugin'
import motionBlock from 'nuxt-motion-block/vue-plugin'
import { createApp, h } from 'vue'
import { ZiggyVue } from '../../vendor/tightenco/ziggy'

createInertiaApp({
  title: title => (title ? `${title} - ${appName}` : appName),
  resolve: name =>
    resolvePageComponent(
      `./Pages/${name}.vue`,
      import.meta.glob<DefineComponent>('./Pages/**/*.vue')
    ),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .use(ZiggyVue)
      .use(ui)
      .use(motionBlock)
      .mount(el)
  },
})

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

<body>
  <div id="app" class="isolate"></div>
  @inertia
</body>

<template>
  <MTextShimmer placeholder="Works in Laravel!" />
</template>

import ui from '@nuxt/ui/vue-plugin'
import motionBlock from 'nuxt-motion-block/vue-plugin'

// in setup(), after .use(ui):
.use(motionBlock, {
  ui: {
    textShimmer: { root: 'font-mono' },
  },
})