README

A modern starter kit for building full-stack applications with Laravel, Inertia.js, and Vue 3.

Pre-configured with dark mode, flash toasts, state management, and a clean project structure — ready to build on top of.

Tech Stack

Features

• Dark Mode — light / dark / system with OS-level listener, persisted in localStorage
• Flash Toasts — Laravel session('flash') messages automatically shown as toasts
• Confirm Dialog — programmatic await confirm() pattern via Promise
• Auth Helpers — useUser() composable with roles, permissions, can()/cannot(), is()/isNot()
• Auth Components — <Authenticated> and <Guest> render-slot components
• Scope Component — inline reactive state without a store
• Utility Helpers — plural(), truncate(), formatNumber(), formatCurrency(), formatDate(), copyToClipboard(), dataGet(), uid(), sleep()
• Pinia Persistence — app and theme stores persisted out of the box
• CSS Architecture — split into theme.css, base.css, components.css, utilities.css

Requirements

• PHP 8.3+
• Composer
• Node.js 20+
• npm

Installation

# Clone the repository
git clone https://github.com/larastash/vue.git my-app
cd my-app

# Install PHP dependencies
composer install

# Install Node dependencies
npm install

# Configure environment
cp .env.example .env
php artisan key:generate

# Run database migrations
php artisan migrate

# Start development servers
composer run dev

The VITE_APP_NAME variable in .env controls the page <title>.

Project Structure

resources/js/
├── app.js                    # Entry point: Inertia, Pinia, dayjs setup
├── components/
│   ├── Scope.vue             # Inline reactive state via scoped slot
│   ├── Toaster.vue           # Pre-styled vue-sonner toaster
│   └── auth/
│       ├── Authenticated.vue # Renders slot only for authenticated users
│       └── Guest.vue         # Renders slot only for guests
├── composables/
│   ├── useApp.js             # Access to the app store
│   ├── useConfirm.js         # Programmatic confirm dialog (Promise-based)
│   ├── useFlash.js           # Flash messages + auto-toast watcher
│   ├── usePageProps.js       # Access to Inertia page props
│   ├── useTheme.js           # Theme toggle (light/dark/system cycle)
│   └── useUser.js            # Current user, roles, permissions, guards
├── layouts/
│   ├── Application.vue       # Main app layout (with Toaster)
│   └── Guest.vue             # Guest layout (with Toaster)
├── lib/
│   ├── helpers.js            # Utility functions (plural, truncate, format...)
│   └── utils.js              # cn() — Tailwind class merger
├── pages/
│   └── Welcome.vue           # Demo page with theme toggle & Scope example
└── stores/
    ├── appStore.js           # Global app state (extend as needed)
    └── themeStore.js         # Theme state with system preference listener

Composables

useUser()

Access the authenticated user from Inertia shared props. Returns a reactive object — always access properties through the object, do not destructure.

const user = useUser();

// user.data        — raw user object (or null)
// user.isAuthenticated
// user.can('edit-posts')

useTheme()

Cycle through light → dark → system themes.

const { currentTheme, isDark, toggleTheme, setTheme } = useTheme();

useConfirm()

Promise-based confirm dialog.

const { confirm } = useConfirm();

const ok = await confirm({
  title: 'Delete record?',
  message: 'This action cannot be undone.',
  variant: 'danger',
});

if (ok) {
  // proceed
}

useFlash() / useFlashToasts()

Access Laravel flash messages. Call useFlashToasts() once in your layout to auto-show toasts.

// In a layout:
useFlashToasts();

// In a component:
const { has, get, flash } = useFlash();
if (has('success')) console.log(get('success'));

Laravel side:

return back()->with('flash', ['success' => 'Saved!']);

usePageProps()

Access to Inertia page props.

const { prop } = usePageProps();
const appName = prop('appName', 'Laravel');

Components

<Scope>

Inline reactive state without creating a store or ref in the parent.

<Scope :data="{ count: 0 }" v-slot="{ data }">
  <button @click="data.count++">{{ data.count }}</button>
</Scope>

<Authenticated> / <Guest>

Conditional rendering based on auth state. Slot props are the full useUser() reactive object.

<Authenticated v-slot="{ data }">
  <p>Hello, {{ data.name }}</p>
</Authenticated>

<Guest>
  <p>Please log in</p>
</Guest>

CSS Architecture

Styles are split into focused files imported in resources/css/app.css:

PHP Helpers

Global helper functions available server-side (via app/helpers.php):

• user($guard?) — get the authenticated user
• plural($n, $forms, $includeNumber) — Russian pluralization

License

Open-source under the MIT license.