PHPackages                             weswecan/laravel-starter-kit - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. weswecan/laravel-starter-kit

ActiveProject

weswecan/laravel-starter-kit
============================

Starterkit for Laravel projects using inertia, typescript, sass, vue 3

017↓100%PHP

Since Mar 15Pushed 1mo agoCompare

[ Source](https://github.com/WesWeCan/laravel-starter-kit)[ Packagist](https://packagist.org/packages/weswecan/laravel-starter-kit)[ RSS](/packages/weswecan-laravel-starter-kit/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

Laravel + Inertia + Vue 3 Starter Kit (TypeScript, Ziggy, SCSS)
---------------------------------------------------------------

[](#laravel--inertia--vue-3-starter-kit-typescript-ziggy-scss)

This is a Laravel 12 starter configured for a Vue 3 + Inertia app with TypeScript, Ziggy route helpers, axios, SCSS via Vite, and Laravel Dusk for E2E coverage.

### Stack

[](#stack)

- **Backend**: Laravel 12, Inertia Laravel adapter
- **Frontend**: Vue 3 with **script setup** and **TypeScript**
- **Bundler**: Vite 8 + `laravel-vite-plugin`
- **Dev tools**: `vite-plugin-vue-devtools`
- **Routing helpers**: Ziggy (`@routes` in Blade, `ZiggyVue` in Vue)
- **HTTP**: Axios pre-configured in `bootstrap.ts`
- **Styles**: SCSS (global styles only; no styles inside SFCs)
- **Testing**: Pest + Laravel Dusk
- **DX**: Laravel Pail (pretty app logs) and a queue worker wired in the dev script

### Project layout (key files)

[](#project-layout-key-files)

- `resources/js/app.ts`: Inertia + Vue app bootstrap, imports `../scss/index.scss`, registers `ZiggyVue`
- `resources/js/bootstrap.ts`: axios on `window`, sets `X-Requested-With`
- `resources/js/Pages/*.vue`: Inertia pages (TypeScript SFCs)
- `resources/js/Layouts/BasicLayout.vue`: Base layout with ``
- `resources/scss/index.scss`: global styles (uses `_variables.scss`)
- `resources/views/app.blade.php`: Inertia root, includes `@routes` + `@vite`
- `vite.config.js`: Laravel + Vue + Vue DevTools plugins
- `tsconfig.json`: strict TS, path aliases (`@/*`, `ziggy-js`)

### Conventions

[](#conventions)

- **Vue SFCs**: Always `script setup lang="ts"` at the top, then `template`. No `` blocks in SFCs.
- **Styles**: Put styles in `resources/scss/` and import from `app.ts`.
- **Aliases**: Use `@/` for `resources/js` (configured in `tsconfig.json`).
- **Routes**: Use Ziggy's `route()` in Vue (via `ZiggyVue`) and in Blade via `@routes`.
- **Page titles**: Set by Inertia using `VITE_APP_NAME` for suffix.

### Prerequisites

[](#prerequisites)

- PHP 8.3+
- Composer
- Node 18+
- Yarn

### Install

[](#install)

```
composer install
cp .env.example .env
php artisan key:generate
yarn install
```

### Develop

[](#develop)

Run backend and frontend in two terminals:

```
php artisan serve
yarn dev
```

If you use Valet, you can skip `php artisan serve` and just run `yarn dev`.

Alternatively, a single command exists via Composer (spawns server, queue worker, pail logs, and Vite).

```
composer run dev
```

### Build

[](#build)

```
yarn build
```

### Tests

[](#tests)

```
composer test
```

### Browser tests (Laravel Dusk)

[](#browser-tests-laravel-dusk)

Use Valet with the secured local domain from `.env.dusk.local`:

```
cp .env.dusk.local.example .env.dusk.local
php artisan key:generate --env=dusk.local
yarn dev
composer run dusk
```

- Default Dusk URL: `https://laravel-starter-kit.test`
- Default Dusk database: `laravel_testing`
- If Chrome updates locally, sync the driver with:

```
composer run dusk:detect-chromedriver
```

### Type checking

[](#type-checking)

- Vue SFC-aware type-check:

```
yarn dlx vue-tsc --noEmit
```

- Or plain TS (non-SFC):

```
yarn tsc --noEmit
```

### Using Ziggy route helpers

[](#using-ziggy-route-helpers)

- In Blade (already included): `@routes`
- In Vue (globally via `ZiggyVue`):

```
route('index')
route('posts.show', { post: 1 })
```

### Notes

[](#notes)

- Axios is available as `window.axios` with `X-Requested-With` set.
- The Inertia progress bar is enabled with a gray color.
- `assetsInclude: ['**/*.glsl']` is enabled in Vite if you import GLSL assets.

### What’s included vs. not

[](#whats-included-vs-not)

- Included: Vue 3 + TS, Inertia, Ziggy, SCSS, Axios, Vite, Vue DevTools, Pest, Pail, queue worker in dev.
- Not included: SSR, authentication scaffolding, ESLint/Prettier config.

###  Health Score

21

—

LowBetter than 19% of packages

Maintenance58

Moderate activity, may be stable

Popularity7

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity11

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/bf1d44678173e63468c9abca09a7e329a773a522a17e7370d3e0a9812a16daea?d=identicon)[WesWeCan](/maintainers/WesWeCan)

---

Top Contributors

[![WesWeCan](https://avatars.githubusercontent.com/u/79587028?v=4)](https://github.com/WesWeCan "WesWeCan (7 commits)")

### Embed Badge

![Health badge](/badges/weswecan-laravel-starter-kit/health.svg)

```
[![Health](https://phpackages.com/badges/weswecan-laravel-starter-kit/health.svg)](https://phpackages.com/packages/weswecan-laravel-starter-kit)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)