Looking to hire Laravel developers? Try LaraJobs

laravel-vue-nativeui maintained by ghostcompiler

Description
A Laravel, Inertia, Vue, SSR, Naive UI, and vue-sonner starter kit.
Last update
2026/04/25 01:45 (dev-main)
License
MIT
Links
GitHub - Packagist
Downloads
3
Tags
laravel - jsx - vue - inertia - ssr - naive-ui

dev-main

Last update
2026/04/25 01:45
License
MIT
Require
  • php ^8.3
  • inertiajs/inertia-laravel ^3.0
  • laravel/framework ^13.0
  • laravel/tinker ^3.0
v1.0.5

Last update
2026/04/25 01:45
License
MIT
Require
  • php ^8.3
  • inertiajs/inertia-laravel ^3.0
  • laravel/framework ^13.0
  • laravel/tinker ^3.0
v1.0.4

Last update
2026/04/25 01:18
License
MIT
Require
  • php ^8.3
  • inertiajs/inertia-laravel ^3.0
  • laravel/framework ^13.0
  • laravel/tinker ^3.0
v1.0.3

Last update
2026/04/25 01:09
License
MIT
Require
  • php ^8.3
  • inertiajs/inertia-laravel ^3.0
  • laravel/framework ^13.0
  • laravel/tinker ^3.0
v1.0.2

Last update
2026/04/25 00:32
License
MIT
Require
  • php ^8.3
  • inertiajs/inertia-laravel ^3.0
  • laravel/framework ^13.0
  • laravel/tinker ^3.0
v1.0.1

Last update
2026/04/25 00:18
License
MIT
Require
  • php ^8.3
  • inertiajs/inertia-laravel ^3.0
  • laravel/framework ^13.0
  • laravel/tinker ^3.0
v1.0.0

Last update
2026/04/25 00:11
License
MIT
Require
  • php ^8.3
  • inertiajs/inertia-laravel ^3.0
  • laravel/framework ^13.0
  • laravel/tinker ^3.0
Comments
comments powered by Disqus

Laravel Vue NativeUI Starter

A full Laravel starter project using Vue 3, Inertia, Naive UI, vue-sonner, Tailwind CSS, and proper server-side rendering support.

Repository: ghostcompiler/laravel-vue-nativeui

Current release: v1.0.5

The app is intentionally set up as a Vue single-file component project with plain JavaScript entry files.

Naive UI Included

This starter is built around Naive UI as the default Vue component library. Naive UI is already installed, configured, SSR-ready, themed, and demonstrated in the homepage component lab.

Naive UI packages included in this project:

naive-ui
vfonts
@css-render/vue3-ssr

Primary Naive UI files:

resources/js/layouts/AppLayout.vue      Naive UI providers and app shell
resources/js/theme/naive.js             Light/dark Naive UI theme tokens
resources/js/pages/Home.vue             Naive UI component showcase
resources/js/ssr.js                     Naive UI SSR style collection

Naive UI providers configured in AppLayout.vue:

<NConfigProvider :theme="resolveNaiveTheme(themeName)" :theme-overrides="themeOverrides[themeName]">
    <NLoadingBarProvider>
        <NDialogProvider>
            <NNotificationProvider>
                <NMessageProvider>
                    <slot />
                </NMessageProvider>
            </NNotificationProvider>
        </NDialogProvider>
    </NLoadingBarProvider>
    <NGlobalStyle />
</NConfigProvider>

The homepage includes working examples of daily-use Naive UI components:

Category Components
Layout NLayout, NLayoutHeader, NLayoutContent, NPageHeader, NSpace
Display NCard, NAlert, NBadge, NTag, NStatistic, NDescriptions, NTimeline
Forms NForm, NFormItem, NInput, NSelect, NDatePicker, NInputNumber, NSlider
Choices NCheckbox, NRadioGroup, NRadioButton, NSwitch
Overlays NModal, NDrawer, NPopover, NTooltip, NDropdown
Data NDataTable, NTabs, NTabPane, NList, NListItem
Feedback APIs useDialog, useMessage, plus vue-sonner toasts

Naive UI SSR is handled by @css-render/vue3-ssr. The SSR entry collects Naive UI generated CSS and pushes it into the Inertia SSR response head, so Naive UI components render styled on the first request instead of flashing during hydration.

import { setup as setupCssRender } from '@css-render/vue3-ssr';

cssRender = setupCssRender(app);
const css = cssRender?.collect();
response.head.push(css);

To create a new Naive UI component:

php artisan make:component Forms/StatusSelect

Example generated component:

<script setup>
import { NFormItem, NSelect } from 'naive-ui';

defineOptions({
    name: 'StatusSelect',
});
</script>

<template>
    <NFormItem label="Status">
        <NSelect :options="[{ label: 'Active', value: 'active' }]" />
    </NFormItem>
</template>

Stack

  • Laravel 13 application scaffolded from laravel/laravel
  • Inertia Laravel v3 and @inertiajs/vue3
  • Vue 3 single-file components through Vite
  • Inertia SSR with php artisan inertia:start-ssr
  • Naive UI with light and dark theme overrides
  • Naive UI SSR CSS collection through @css-render/vue3-ssr
  • vue-sonner for toast notifications
  • Tailwind CSS v4 using html[data-theme="dark"]
  • Cookie-backed theme cache to avoid refresh flicker
  • GitHub Actions for quality, security, and tests

Requirements

  • PHP 8.3 or newer
  • Composer 2
  • Node.js 22 or newer
  • npm
  • SQLite, MySQL, PostgreSQL, or another Laravel-supported database

Installation

Create a new project directly from Composer:

composer create-project ghostcompiler/laravel-vue-nativeui

Create a new project with the Laravel installer:

laravel new project --using=ghostcompiler/laravel-vue-nativeui

Clone the GitHub repository manually:

git clone https://github.com/ghostcompiler/laravel-vue-nativeui demo
cd demo
composer install
npm install
cp .env.example .env
php artisan key:generate
npm run start

npm run start builds the browser assets, builds the SSR bundle, starts Laravel, and starts the Inertia SSR renderer.

If your application uses database tables, run migrations before starting the app:

php artisan migrate

Development

Run Laravel and Vite in separate terminals:

php artisan serve
npm run dev

Or use the Composer helper:

composer run dev

SSR

Build the browser assets and SSR bundle:

npm run build:ssr

Start the Inertia SSR renderer:

php artisan inertia:start-ssr

Stop the renderer:

php artisan inertia:stop-ssr

The SSR bundle is emitted to bootstrap/ssr/ssr.js.

Theme System

The theme is stored in a plain theme cookie with either light or dark.

Laravel reads that cookie before rendering Blade, places the value on:

<html data-theme="dark">

The same value is shared globally through Inertia as theme. Vue, Naive UI, Sonner, and Tailwind all consume the same initial value, so the UI does not flicker on refresh.

Artisan Generators

This project includes starter-specific generators for frontend boilerplate. Pages, layouts, and components are generated as Vue single-file components.

Create an Inertia page:

php artisan make:page Dashboard
php artisan make:page Admin/Users/Index

Create a layout:

php artisan make:layout AdminLayout
php artisan make:layout Settings/Shell

Create a reusable component:

php artisan make:component EmptyState
php artisan make:component Forms/TextInput

Create a JavaScript utility module:

php artisan make:lib formatters/date
php artisan make:lib navigation

Overwrite an existing generated file:

php artisan make:page Dashboard --force

Frontend Structure

resources/js/app.js               Client-side Inertia entry
resources/js/ssr.js               Server-side Inertia entry
resources/js/layouts/             Vue layouts
resources/js/pages/               Inertia Vue pages
resources/js/components/          Reusable Vue components
resources/js/lib/                 Plain JavaScript helpers
resources/js/theme/naive.js       Naive UI theme tokens
resources/css/app.css             Tailwind and app shell styles
resources/views/app.blade.php     Inertia root view

Naive UI

Naive UI is the primary component library for this starter. It is installed with:

npm install naive-ui vfonts @css-render/vue3-ssr

The app imports components directly from naive-ui inside Vue files:

import { NButton, NCard, NInput, NSelect } from 'naive-ui';

Naive UI is mounted once in resources/js/layouts/AppLayout.vue through these providers:

  • NConfigProvider
  • NLoadingBarProvider
  • NDialogProvider
  • NNotificationProvider
  • NMessageProvider
  • NGlobalStyle

The global provider receives the current server-shared theme:

<NConfigProvider
    :theme="resolveNaiveTheme(themeName)"
    :theme-overrides="themeOverrides[themeName]"
    abstract
>
    <slot />
</NConfigProvider>

Theme tokens live in resources/js/theme/naive.js. This file defines:

  • lightTheme
  • darkTheme
  • shared common tokens
  • per-component overrides for buttons, cards, tags, colors, borders, text, and surfaces

Naive UI With SSR

Naive UI generates component CSS through css-render. The SSR entry collects those styles per request with @css-render/vue3-ssr:

import { setup as setupCssRender } from '@css-render/vue3-ssr';

cssRender = setupCssRender(app);
const css = cssRender?.collect();

The collected CSS is pushed into the Inertia SSR head response, so Naive UI components render correctly on the first HTML response instead of waiting for client hydration.

Included Naive UI Component Lab

The homepage includes a daily-use component lab for quick testing and reference:

  • Layout: NLayout, NLayoutHeader, NLayoutContent, NPageHeader
  • Display: NCard, NAlert, NBadge, NTag, NStatistic, NDescriptions, NTimeline
  • Data: NDataTable, NTabs, NTabPane, NList, NListItem
  • Forms: NForm, NFormItem, NInput, NSelect, NDatePicker, NInputNumber
  • Choices: NCheckbox, NRadioGroup, NRadioButton, NSwitch
  • Feedback: NProgress, NModal, NDrawer, NPopover, NTooltip, NDropdown
  • Providers: useDialog, useMessage

This gives you working examples for common dashboard, admin, SaaS, and internal-tool screens.

Adding New Naive UI Components

Create a component with the project generator:

php artisan make:component Forms/StatusSelect

Then import the Naive UI pieces you need:

<script setup>
import { NFormItem, NSelect } from 'naive-ui';
</script>

<template>
    <NFormItem label="Status">
        <NSelect :options="[{ label: 'Active', value: 'active' }]" />
    </NFormItem>
</template>

Toasts

vue-sonner is mounted in the app layout:

<Toaster rich-colors close-button expand position="top-right" :theme="themeName" />

Use it anywhere in Vue:

import { toast } from 'vue-sonner';

toast.success('Saved');

Quality

Run the Laravel test suite:

php artisan test

Run the production build:

npm run build:ssr

Build the app and start Laravel with the Inertia SSR renderer:

npm run start

Run PHP formatting checks:

./vendor/bin/pint --test

GitHub Actions

The project includes:

  • .github/workflows/quality.yml
  • .github/workflows/security.yml
  • .github/workflows/tests.yml

These workflows install PHP and Node dependencies, validate Laravel code style, run audits, build frontend assets, build SSR, and run the test suite.

Development And Build Environment

This package was developed using ServBay as the local development environment.

Development Tool Used

ServBay your developement friend

Testing And Build Machine

  • Tested on: Mac M4
  • Built on: Mac M4