Vue Starter Kit Vue

What's in the kit

The full SaaS Laravel backend (multi-tenancy, auth, users, roles, domains, localization) with a Vue 3 + TypeScript frontend in resources/js.

• The Laravel side is identical in all three kits. Only the frontend differs.
• Pages are Vue single-file components with <script setup lang="ts">, rendered through Inertia v3. There is no separate API.
• UI is built from the kit's own Common* form components on top of shadcn-vue.

Tech stack

Package	Version	Used for
vue	^3.5	Single-file components
@inertiajs/vue3	^3.0	Inertia client: Form, Link, router, usePage, useForm, useHttp, setLayoutProps
@inertiajs/vite	^3.0	Resolves pages from resources/js/pages
reka-ui	^2.9	Primitives behind the shadcn-vue components
@lucide/vue	^1.17	Icons as components
@iconify/vue	^5.0	String icons (CommonIcon, menu icons)
vue-sonner	^2.0	Toasts
vue-draggable-plus	^0.6	Drag and drop on Setup → Menus
@vueuse/core	^12.8	Utilities used by the UI primitives
vue-input-otp	^0.3	Two-factor code input
@erag/lang-sync-inertia	^3.1	vueLang() translation helper
@laravel/passkeys	^0.2	Passkey registration and login
@laravel/vite-plugin-wayfinder	^0.1	Typed route and controller functions
vite / tailwindcss	^8 / ^4.1	Build and styling
vue-tsc	^2.2	Type checking
vite-plugin-vue-devtools	^8.2	Vue DevTools in development

Conventions

Topic	Convention	Example
Page files	PascalCase .vue under a lowercase folder	pages/tenants/Index.vue
Inertia page name	Path without .vue	Inertia::render('tenants/Index')
Page-only components	Partials/ next to the page	pages/users/Partials/UserFormModal.vue
Form components	Common prefix	components/common/CommonSelect.vue
Shared logic	Composables in composables/useX.ts	usePermission, useConfirmDialog, useLanguage
Layout per page	defineOptions({ layout })	See Layouts
Forms	Inertia <Form> with v-slot="{ errors, processing }"	See Inertia
Translations	vueLang() from @erag/lang-sync-inertia/vue	__('modules.user.index.title')

Get the code

After purchase you get access to the private repository erag-labs/saas-laravel-starter-kit-vue (see Repository access).

git clone https://github.com/erag-labs/saas-laravel-starter-kit-vue.git
cd saas-laravel-starter-kit-vue

Install

Full setup (PHP, database, Herd domains, tenancy) is in Local development. The short version:

One command

composer setup
php artisan db:seed

Step by step

composer install
cp .env.example .env
php artisan key:generate
php artisan migrate --seed
npm install
npm run build

• composer setup migrates but does not seed. Run php artisan db:seed once to create roles, permissions, menus and one default user per role.
• .env.example ships with APP_URL=http://vue.test and APP_DOMAIN=vue.test. Change both to your domain.
• Start everything with composer dev. All frontend commands are in Development.

TIP

The Wayfinder files in resources/js/routes and resources/js/actions are generated by the Vite plugin and git-ignored. Run npm run dev or npm run build once before type checking.

Next steps

• Architecture: request flow, folders, shared props, permissions, translations
• Components: the Common* form kit, shadcn-vue primitives, app shell
• Pages: every page and its route
• Layouts: sidebar/header app layout, card/simple/split auth layout
• Inertia: forms, visits, flash toasts, Wayfinder
• Development: commands, adding a page and a form