Skip to content

A Vue or React site on Laravel, without writing the PHP ​

You build front ends. A client wants a site with an admin their editors can use, a blog, maybe a shop, and it has to rank. The usual answer is a headless CMS plus your own app: two deployments, an API to glue, a rendering layer you write, and the search engines left to the client side. The other usual answer is a PHP CMS, where the theme is PHP and so is everything you touch.

kitloom is a Laravel CMS where the theme is a Vue or React app and the rest is already there. You install it from a skeleton, write templates with props the server types for you, build, deploy with a kit, and the pages come out rendered on the server. You don't open the PHP unless you want to, and when you want to, it is documented. Here is what that looks like, step by step.

The content is not your job either ​

Before the templates: who fills the site? With kitloom/ai an AI agent connects to the site over MCP and does the editor's work through the same code as the admin, as the user whose key it holds. Hand it the brief:

  • "Create the About, Services and Contact pages from this text, and put them in the header menu."
  • "Write ten posts for the blog's demo, each with a cover and an excerpt."
  • "Upload these twelve icons and give them alt texts."

create_content, menu_save, upload_media — every module brings its tools, nothing is deleted for good, and every change is in the activity log. So while you build the templates, the content you build against is real, and you never spent an afternoon in the admin pasting lorem ipsum. Run your site from Claude or Cursor shows the setup.

1. Install: one command, a site with an admin ​

bash
composer create-project kitloom/filament-skeleton my-site --repository=https://packages.kitloom.dev --add-repository
cd my-site && composer run dev

create-project asks which modules the site keeps (SEO, forms, the shop, comments…) and which theme, builds the theme and fills the site with the theme's demo if you say yes. What comes up is a Laravel application with Filament (or Nova) as the admin: posts, pages, media, menus, users, settings — the screens editors already know, on the WordPress data model, with no WordPress inside. Already on WordPress? The site comes along with its database and URLs.

Pick a theme from the catalog to start from — eleven in Vue, one in React — or generate an empty one:

bash
php artisan kitloom:make-theme Studio

2. Your part: a template per kind of page ​

A theme's templates live in resources/js/Templates/, named as the WordPress template hierarchy names them: front-page.vue, single.vue, page.vue, archive.vue, search.vue, 404.vue. The server resolves the request, picks the most specific template the theme has, and renders it as an Inertia page. A React theme has the same files as .tsx.

What a template gets are parts: the content, the menus, the site's name and logo, the comments, a product — each a typed object. The theme says which parts each template needs, and that list is the one PHP file you will see, written by the generator:

php
protected array $parts = [
    '*'       => [SiteInfo::class, Content::class, Menus::class],
    'single'  => [Comments::class],
];

The props are typed from the server, not by hand. php artisan kitloom:schema --types writes resources/js/kitloom.d.ts from the parts' schemas, and the build runs it before a TypeScript theme compiles, so the file is never stale:

vue
<script setup lang="ts">
import type { PageProps } from '../kitloom';

defineProps<PageProps<'content' | 'menus'>>();
</script>

<template>
    <h1>{{ content.title }}</h1>
    <div v-html="content.content" />
</template>

A key that no part gives fails the type check, not the site. Navigation between pages is Inertia's: no full reloads, the next page's parts arrive as JSON. Anything below the first screen the theme can mark as deferred, and it comes after the page has shown.

You have a design already? From an HTML template is the checklist two of the bundled themes were made by. You want to change one of the bundled themes a little? A child theme holds only the files you change, and @/Components/Header.vue in the parent's templates picks up yours.

3. Rendered on the server, out of the box ​

Search engines, link previews and a reader's AI assistant get the page as HTML, not an empty <div> waiting for JavaScript. Every Vue and React theme comes with a server entry beside its client one, and the build makes both:

bash
npm run build:themes          # every theme: the client bundle and the SSR bundle
php artisan inertia:start-ssr # one Node process renders them all

That is the whole setup. There is nothing to configure in PHP: with the server running, a page's first response carries the template's markup and its <title> and meta; with the server down, the page is drawn in the browser as before, and the site never breaks. The same address also answers as data — Accept: application/json for a mobile app or another front end, Accept: text/markdown for an agent that reads the page as text. Writing a Theme → Server-side rendering, Headless & APIs.

4. Deploy with a kit, not a DevOps course ​

bash
php artisan kitloom:deploy-kit server     # or forge, docker, laravel-cloud, digitalocean-app

The kit reads the site as it is — the admin, the theme, the modules, whether a theme needs Node — and writes the files that put it on a server: a script that sets the server up, a deploy recipe, a CI workflow, with the queue worker and the SSR server kept running as services. The deployment guide says what each target expects, and Deploy a Laravel CMS to DigitalOcean, Laravel Cloud or Docker walks through three of them.

5. Documented, all of it ​

Everything above has a page, written for the person doing it:

And the PHP? It is Laravel, in the open, with tests. The day a template needs data no module gives — the three latest projects of a client, say — a part is a small PHP class with a schema, and the docs show one. Until that day, you don't have to look.

Try it ​

Two sandboxes, each a site of your own for three days, with demo content and the admin — no sign-up:

kitloom is a paid product — one price per site, or unlimited — and the documentation is open to everyone.

Last updated:

kitloom — modules and themes for Laravel.
Contact · Pricing · Services · License · Refunds · Privacy · Community · YouTube · [email protected]