README

Yii Framework

Inertia Vue

Vue adapter helpers for yii2-framework/inertia
Vue-friendly root view and Vite asset integration for Yii2 Inertia applications

Features

Overview

yii2-framework/inertia-vue is a thin PHP-side adapter package for building Vue-based Inertia applications on top of yii2-framework/inertia.

This package does not install npm dependencies for you. Instead, it provides:

a Vue-specific bootstrap class for Yii2;
a default root view that outputs Vite tags plus the initial Inertia page payload;
a Vite helper component for development-server and manifest-driven production assets;
documentation and conventions for the application-owned Vue client entrypoint.

Installation

composer require yii2-framework/inertia-vue:^0.1

return [
    'bootstrap' => [\yii\inertia\vue\Bootstrap::class],
    'components' => [
        'inertiaVue' => [
            'class' => \yii\inertia\vue\Vite::class,
            'manifestPath' => '@webroot/build/.vite/manifest.json',
            'baseUrl' => '@web/build',
            'entrypoints' => ['resources/js/app.js'],
            'devMode' => YII_ENV_DEV,
            'devServerUrl' => 'http://localhost:5173',
        ],
    ],
];

Use only yii\inertia\vue\Bootstrap::class in the bootstrap list. It already delegates the base yii2-framework/inertia bootstrap.

Vue client entrypoint

Install the client-side dependencies in your application project:

npm install vue @vitejs/plugin-vue @inertiajs/vue3 vite

Then create your client entrypoint, for example resources/js/app.js:

import { createApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/vue3";

createInertiaApp({
    resolve: (name) => {
        const pages = import.meta.glob("./Pages/**/*.vue", { eager: true });
        return pages[`./Pages/${name}.vue`];
    },
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .mount(el);
    },
});