Inertia.js + Vue 3 Application Template

Skeleton Yii2 application with Inertia.js + Vue 3 integration
Server-driven SPA with Tailwind CSS v4, Flowbite, dark mode, Cloudflare Turnstile, and Codeception tests

Use the "Use this template" button on GitHub to create your own repository from this template.

Features

Quick start

# create a new Yii2 application using the Inertia.js + Vue 3 template
composer create-project --prefer-dist yii2-extensions/app-inertia-vue:^0.1@dev app-vue

# navigate to the application directory
cd app-vue

# run database migrations
./yii migrate/up

# build production assets (one-shot; for live editing see the HMR workflow below)
npm run build

# start the development server
./yii serve

Development workflow with HMR

npm run build produces production assets once and exits. To edit .vue files and see changes in the browser without rebuilding, run two processes side by side:

# Terminal 1 — Vite dev server (HMR for .vue and Tailwind CSS)
npm run dev

# Terminal 2 — Yii2 in dev mode
YII_ENV=dev ./yii serve

How the pieces connect:

• public/index.php reads the YII_ENV environment variable. When it equals dev, inertiaVue.devMode evaluates to true in config/web.php, and the root view emits <script> tags pointing at http://localhost:5173 instead of the built manifest.
• Vue HMR is carried natively by @vite/client together with @vitejs/plugin-vue; no additional preamble is required.
• Before deploying, stop the Vite dev server, run npm run build, unset YII_ENV (or set it to prod), and serve public/. Production mode reads hashed assets from public/build/ via the Vite manifest.

For CORS guidance on non-localhost setups (Docker, tunnels, reverse proxies), troubleshooting, and the full production-switch procedure, see the adapter's Development Notes.

Docker

docker compose up -d

Documentation

• 📚 Installation Guide
• ⚙️ Configuration Reference
• 💡 Usage Examples
• 🧪 Testing Guide

Package information

Quality code

Our social networks

License