v1.0

Vela — Laravel Edition

Thank you for purchasing Vela! This is the Laravel build of the template — real Blade views and named routes, the exact compiled CSS/JS asset pipeline as the rest of the Vela family. This guide covers requirements, setup, what's interactive, and how to customize it.

Introduction

This package is a Laravel port of the Vela Admin Dashboard Template, converted page-for-page from the static HTML/CSS export into real Blade templates and routing. It contains:

156 real routes — every dashboard, list, detail, form, chart, and utility page, each a named route resolving a Blade view under resources/views/pages/.
One shared, purged Tailwind CSS bundle compiled via Vite — same design tokens, same spacing, same responsive breakpoints as every other Vela edition.
Dark & light themes, switchable at runtime and persisted to localStorage.
Working sidebar navigation, mobile drawer, and command palette (⌘K) on every page.
The same hand-written vela-static.js behavior layer the static HTML export uses — chart tabs, accordions, toasts, table filters/search/pagination and more all work identically, server-rendered by Blade instead of pre-baked into static HTML files.

If you need the buildable React/TypeScript source instead — to add real data-fetching, wire up a different backend, or extend the component library — that's a separate package. See Credits & licenses.

Requirements

PHP 8.3+ with the standard extensions Laravel needs (mbstring, openssl, pdo, tokenizer, xml, ctype, json, bcmath)
Composer 2.x
Node.js 18+ and npm, only to compile the CSS/JS assets via Vite
Any Laravel-supported database — the package ships configured for SQLite out of the box (zero setup), but works with MySQL/PostgreSQL by editing .env

Quick start

From the vela-laravel/ folder:

composer install
cp .env.example .env
php artisan key:generate
touch database/database.sqlite
php artisan migrate
npm install
npm run build
php artisan serve

Then open http://localhost:8000.

For local development with live CSS/JS reloading, run npm run dev in a second terminal instead of npm run build.

Never commit a real .env file. The package ships only .env.example — copy it and generate your own APP_KEY as shown above. Set APP_ENV=production and APP_DEBUG=false before deploying.

Package structure

vela-laravel/
├─ app/                      # Minimal Laravel app scaffold
├─ routes/web.php            # All 156 named routes
├─ resources/
│  ├─ views/
│  │  ├─ layouts/app.blade.php   # Shared chrome: sidebar, topbar, command palette
│  │  └─ pages/                   # One Blade view per route, mirrors the route tree
│  │     ├─ dashboards/  users/  products/  orders/  projects/ …
│  │     └─ forms/  charts/  tables/  settings/  reports/ …
│  ├─ css/  js/               # Vite entry points
├─ public/build/              # Compiled assets (generated by `npm run build`)
├─ public/assets/js/vela-static.js   # Same behavior layer as the HTML/other editions
├─ database/database.sqlite   # Default SQLite database (created by `touch` above)
└─ .env.example                # Copy to .env and fill in your own values

Every internal link (sidebar, breadcrumbs, "view all" buttons, row links) points at a real named route — there is no dead link, and check-routes.php (included) verifies every route returns 200/302 against a running server.

What's interactive vs. static

The Laravel edition renders server-side with Blade, but reuses the exact same compiled vela-static.js behavior layer as the static HTML export for client-side interactivity, since the underlying markup and data-vela-* attributes are identical:

Tabs, toggles, view switches & steppers — the Analytics dashboard's chart-period tabs, Pricing's monthly/yearly toggle, every Settings/Account Switch, the FAQ and Components-showcase accordions, the Multi-Step Wizard's Prev/Next flow, and more.
Filter tabs, category/status selects, free-text search, and client-side pagination — Orders Overview, Data Tables, Help Desk, Support Tickets, Filter Tables, and other list pages filter/search/paginate the real rendered rows with no backend query required.
Toasts — every triggering control (Editable Table's inline cell edit, Form Validation's submit, the Components showcase's toast demo buttons, etc.) fires a real toast matching the shared Toast markup and animation.

What's not reproduced, and why — identical to every other Vela edition, since this is the same behavior layer:

Kanban drag-and-drop stays static — there's no drag-and-drop in the original source either.
Column sorting combined with search/filter/pagination on the same page is not implemented; filtering and searching alone still work.
Dropdown / Popover / Tooltip / Modal instances used as page content on the Components showcase page are trigger-only — their expanded markup is only ever mounted while open in the original React source, so there's nothing for a server-rendered capture to reveal ahead of time.

Themes & navigation

Dark is the default on every page. Click the theme toggle (top bar, sun/moon icon) to switch — the choice is written to localStorage["vela-theme"] and read back on every subsequent page load.

The sidebar, its accordion groups, the mobile drawer (hamburger icon below the lg breakpoint), and the ⌘K command palette all work identically across all 156 routes, driven by the shared layout in resources/views/layouts/app.blade.php and the same vela-static.js file.

Customizing a page

Content — edit the Blade view directly under resources/views/pages/. Each route maps to exactly one view file.
Colors / accent — the design tokens (--acc, --bg-*, --t0/--t1, etc.) are CSS custom properties defined once in the compiled stylesheet. Edit the Tailwind source under resources/css/ and run npm run build to recompile.
Adding a page — add a route in routes/web.php, then create a matching Blade view under resources/views/pages/ that extends the shared layout.
Removing pages — remove the route and its sidebar link (resources/views/layouts/ partials), then delete the view file.

Because navigation is defined once in the shared layout rather than duplicated per page (unlike the static HTML export), a sitewide navigation change only needs to be made in one place.

Deployment

Standard Laravel deployment applies — any host that runs PHP 8.3+ works:

Host	How
Laravel Forge / Vapor	Point a new site at the repo, set the environment variables from `.env.example`, deploy
Shared hosting / cPanel	Upload via FTP, point the document root at `public/`, run `composer install --no-dev` and `php artisan migrate --force` on the server
Docker / VPS	Any standard Laravel + Nginx/Apache + PHP-FPM stack

Before deploying: set APP_ENV=production and APP_DEBUG=false in your production .env, run npm run build to compile production assets, and run php artisan config:cache route:cache view:cache for best performance.

Credits & licenses

Item	Purpose	License
Laravel framework	Application framework (routing, Blade, container)	MIT
Tailwind CSS (compiled via Vite)	The shared stylesheet — compiled at build time	MIT
`vela-static.js`	Theme toggle, sidebar, mobile drawer, command palette, chart tabs, tables, toasts — shared with the static HTML edition	Included with your Vela license

Fonts

Font	Source	License
Plus Jakarta Sans	Google Fonts	SIL Open Font License 1.1
JetBrains Mono	Google Fonts	SIL Open Font License 1.1

Images & icons

All icons and illustrations are hand-drawn inline SVG — no icon font or icon library is bundled.
Demo product photos are hot-linked from Unsplash (free for commercial use, no attribution required). They are demo placeholders — replace them with your own imagery.

No tracking: this package contains zero analytics, telemetry, or tracking scripts of any kind.

Reminder: a regular ThemeForest license covers one end product. Redistribution or resale of this template requires an extended license — see the ThemeForest license terms.

Support

If you have questions not covered here, please reach out through the item's Comments tab or the support contact listed on our ThemeForest profile. Please include your purchase code and a description of the issue.