Posted on Jul 28

I Got Tired of APIs, So I Built a New Vue Framework

Hey everyone,

I want to share a project I've been passionately working on called Fictif. It's a full-stack Vue 3 framework born from
my own frustration with the modern web development workflow.

Github Repo

The Pain Point: The "API Chasm"

I love building with backend frameworks like Laravel or AdonisJS. The routing, controllers, and ORM are just so productive. But I also love the fluid, app-like user experience you get with a Vue SPA.

The problem has always been the gap between the two worlds. To connect them, you have to build and maintain a whole separate thing: a REST or GraphQL API.

Suddenly, you're juggling two sets of routes, two validation layers, and complex state management on the frontend to handle data fetching, loading states, and errors. It felt like I was building two separate applications instead of one.

I looked at tools like Nuxt, but I didn't want to be locked into a Node.js server. I looked at Inertia.js, and I liked the idea, but I felt the client-side tooling could be so much more powerful and integrated.

So, I decided to build the framework I always wanted.

Introducing Fictif: The Best of Both Worlds

Fictif lets you build a modern, reactive single-page application with Vue, but your backend controllers drive the UI directly. No API required.

You just return a view and some data from your backend controller, and Fictif intelligently renders the right Vue component on the frontend. It's that simple.

What Makes Fictif Different?

Fictif isn't just an adapter; it's a complete, "batteries-included" framework for your frontend.

⚡️ Zero-Config Code Splitting: Your page components (*.screen.vue) are automatically discovered and lazy-loaded. Your app is fast by default.
📋 Powerful Form Handling: It comes with a useForm composable that handles data, validation errors, file uploads, and submission states right out of the box. Look how clean this is:

<!-- contact.screen.vue --> <script setup> import { useForm } from 'fictif'; const form = useForm({ name: '', email: '', message: '' }); // form.post('/contact') handles everything, including error mapping. </script> <template> <form @submit.prevent="form.post('/contact')"> <input v-model="form.name" /> <div v-if="form.errors.name">{{ form.errors.name }}</div> <input v-model="form.email" /> <div v-if="form.errors.email">{{ form.errors.email }}</div> <button :disabled="form.processing">Send</button> </form> </template>

✨ A Full Toolkit: It includes a Head manager for SEO, a powerful API client for when you do need one, automatic loading indicators, and more. It’s a complete system where all the pieces are designed to work together.

I'd Love Your Feedback!

This project is still young, but it's born from a real-world need to build better, faster, and more maintainable web apps. I truly believe this "server-driven SPA" approach is a more productive way to work for many of us.

If this sounds interesting to you, I'd be incredibly grateful if you could check it out.