Overview

Viper supercharges Laravel and Vue to build fullstack applications faster than ever by removing tons of wiring/boilerplate code you would have to write yourself anyway.

Features include:

📂 Filesystem routing served by laravel
⚡️ SPA navigation with vue-router
🤝 Write your props and actions inline (or alongside) your vue pages
🔗 Fully typesafe queries and mutations powered by @tanstack/vue-router and spate/typescript-transformer

Here’s an example of an end-to-end typesafe route to update a users profile:

<template>
  <form method="post" @submit.prevent="mutate()">
    <label>
      Your Name
      <input v-model="state.name" />
    </label>
    <button type="submit" :disabled="isPending">Update Profile</button>
  </form>
</template>

<script setup lang="ts">
import { usePage } from '@ozmos/viper-vue';

const page = usePage<ViperGen.Example>();

const { data: user } = page.useProp('user');

const { mutate, state, isPending } = page.useForm('updateProfile', {
  state: {
    name: user.value.name,
  },
  onSuccess(data) {
    alert(`Updated name to ${data.name}`);
  }
});
</script>

<php>
use Ozmos\Viper\Attrs\Prop;
use Ozmos\Viper\Attrs\Action;
use Illuminate\Http\Request;
use App\Dto\UserDto;
use App\Dto\UpdateUserDto;
use App\Models\User;

return new class {
  #[Prop]
  public function user(User $user): UserDto
  {
    return UserDto::from($user);
  }

  #[Action]
  public function updateProfile(User $user, UpdateUserDto $data): UserDto
  {
    $user->update($data->toArray());

    return UserDto::from($user);
  }
};
</php>

Want to try it out?