Laravel Inertia Integration

npm install @artisanpack-ui/vue-laravel

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { createArtisanPackUI } from '@artisanpack-ui/vue';
import { createArtisanPackUILaravel } from '@artisanpack-ui/vue-laravel';

createInertiaApp({
  resolve: (name) => {
    const pages = import.meta.glob('./Pages/**/*.vue', { eager: true });
    return pages[`./Pages/${name}.vue`];
  },
  setup({ el, App, props, plugin }) {
    const app = createApp({ render: () => h(App, props) });

    app.use(plugin);
    app.use(createArtisanPackUI());
    app.use(createArtisanPackUILaravel());

    app.mount(el);
  },
});

{
  success: 'success',
  error: 'error',
  warning: 'warning',
  info: 'info',
  message: 'info',
}

<script setup lang="ts">
import { AppLayout } from '@artisanpack-ui/vue-laravel';
</script>

<template>
  <AppLayout title="Dashboard">
    <template #header>
      <h1>Dashboard</h1>
    </template>

    <p>Page content</p>
  </AppLayout>
</template>

<script setup lang="ts">
import { GuestLayout } from '@artisanpack-ui/vue-laravel';
</script>

<template>
  <GuestLayout title="Login">
    <LoginForm />
  </GuestLayout>
</template>

<script setup lang="ts">
import { InertiaForm, InertiaInput, InertiaSelect } from '@artisanpack-ui/vue-laravel';
import { useInertiaForm } from '@artisanpack-ui/vue-laravel';
import { Button } from '@artisanpack-ui/vue';

const { form, processing, post, getError } = useInertiaForm({
  name: '',
  email: '',
  role: '',
});
</script>

<template>
  <InertiaForm @submit.prevent="post('/users')">
    <InertiaInput label="Name" v-model="form.name" :error="getError('name')" />
    <InertiaInput label="Email" type="email" v-model="form.email" :error="getError('email')" />
    <InertiaSelect label="Role" v-model="form.role" :error="getError('role')" :options="roles" />

    <Button type="submit" color="primary" :loading="processing">Save</Button>
  </InertiaForm>
</template>

<script setup lang="ts">
import { InertiaPagination } from '@artisanpack-ui/vue-laravel';

defineProps<{ users: LaravelPaginator<User> }>();
</script>

<template>
  <InertiaPagination :paginator="users" />
</template>

<script setup lang="ts">
import { InertiaBreadcrumbs } from '@artisanpack-ui/vue-laravel';

const items = [
  { label: 'Home', href: '/' },
  { label: 'Users', href: '/users' },
  { label: 'Edit' },
];
</script>

<template>
  <InertiaBreadcrumbs :items="items" />
</template>

<script setup lang="ts">
import { InertiaMenu } from '@artisanpack-ui/vue-laravel';
</script>

<template>
  <InertiaMenu :items="menuItems" />
</template>

import { useInertiaForm } from '@artisanpack-ui/vue-laravel';

const { form, errors, processing, recentlySuccessful, isDirty, getError, post, put, patch, destroy, reset, clearErrors } = useInertiaForm<{
  name: string;
  email: string;
}>({
  name: '',
  email: '',
});

<script setup lang="ts">
import { useFlashMessages } from '@artisanpack-ui/vue-laravel';

// Must be inside a ToastProvider
useFlashMessages();
</script>

<script setup lang="ts">
import { useAuth } from '@artisanpack-ui/vue-laravel';

const { user, isAuthenticated, isGuest } = useAuth();
</script>

<template>
  <p v-if="isAuthenticated">Hello, {{ user?.name }}</p>
  <p v-else>Please sign in.</p>
</template>

interface AppUser extends AuthUser {
  avatar_url: string;
  role: 'admin' | 'user';
}

const { user } = useAuth<AppUser>();

<script setup lang="ts">
import { FlashAlerts } from '@artisanpack-ui/vue-laravel';
</script>

<template>
  <FlashAlerts />
</template>

<script setup lang="ts">
import { FlashToasts } from '@artisanpack-ui/vue-laravel';
</script>

<template>
  <FlashToasts />
</template>

import type {
  LaravelPaginator,
  LaravelSimplePaginator,
  PaginationLink,
  FlashMessages,
  AuthUser,
  AuthProps,
  SharedPageProps,
} from '@artisanpack-ui/vue-laravel';

// ToastColor is exported from the core package
import type { ToastColor } from '@artisanpack-ui/vue';

interface MyPageProps extends SharedPageProps {
  appName: string;
  permissions: string[];
}

// app/Http/Middleware/HandleInertiaRequests.php
public function share(Request $request): array
{
    return [
        ...parent::share($request),
        'auth' => [
            'user' => $request->user(),
        ],
        'flash' => [
            'success' => fn () => $request->session()->get('success'),
            'error' => fn () => $request->session()->get('error'),
            'warning' => fn () => $request->session()->get('warning'),
            'info' => fn () => $request->session()->get('info'),
        ],
    ];
}

return redirect()->route('users.index')->with('success', 'User created.');