Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Randy_Johnson's avatar

Is it possible to make a package with Inertiajs???

So I have been studying about packages, and everything is straight forward until the point where you are directing to an InertiaJS view.

I have some ideas, in that I would have to re-create the app.js inside the package as well as the app.php

@vite(['resources/js/app.jsx', "resources/js/Pages/{$page['component']}.jsx"])

In that having to some how redirect this.

But I am completely not sure. Please help.

0 likes
7 replies
LaryAI's avatar
Level 58

Yes, it is possible to create a package with InertiaJS. Here are the steps you can follow:

  1. Create a new Laravel package using the composer create-package command.

  2. Install InertiaJS and its dependencies using npm install @inertiajs/inertia @inertiajs/inertia-vue3 vue3.

  3. Create a new Vue component that extends the InertiaApp component and register it with Vue.

// resources/js/InertiaApp.js

import { InertiaApp } from '@inertiajs/inertia-vue3'
import { createApp, h } from 'vue'

createApp({
  render: () => h(InertiaApp, {
    initialPage: JSON.parse(document.getElementById('app').dataset.page),
    resolveComponent: name => require(`./Pages/${name}`).default,
  })
}).mount('#app')
  1. Create a new InertiaJS view in your package and use the @inertia Blade directive to render it.
// resources/views/my-package-view.blade.php

@extends('my-package::layout')

@section('content')
  <div>
    <h1>My Package View</h1>
    <p>Welcome to my package view!</p>
  </div>
@endsection

@push('scripts')
  @vite('resources/js/app.js')
@endpush
  1. Create a new route in your package's routes/web.php file that returns the InertiaJS view.
// routes/web.php

use MyPackage\Http\Controllers\MyPackageController;

Route::get('/my-package', [MyPackageController::class, 'index'])->name('my-package.index');
  1. Create a new controller in your package that returns the InertiaJS view.
// src/Http/Controllers/MyPackageController.php

namespace MyPackage\Http\Controllers;

use Inertia\Inertia;

class MyPackageController
{
    public function index()
    {
        return Inertia::render('my-package-view');
    }
}
  1. Publish your package's assets using the php artisan vendor:publish command.

  2. Use your package in a Laravel application by installing it via Composer and registering its service provider.

// config/app.php

'providers' => [
    // ...
    MyPackage\MyPackageServiceProvider::class,
],
  1. Use the route helper function to generate a URL to your package's InertiaJS view.
// resources/views/welcome.blade.php

<inertia-link href="{{ route('my-package.index') }}">My Package View</inertia-link>

That's it! You should now be able to navigate to your package's InertiaJS view by clicking the link on your Laravel application's homepage.

m4rinos's avatar

@LaryAI are you sure there is something linke a "composer create-package command" ?

1 like
martinbean's avatar

@m4rinos

This reply was automagically generated by our local A.I. Think of it as a one-off attempt to instantly solve your problem. It will not respond to further replies.

1 like
m4rinos's avatar

@vincent15000 ahh, not that advanced eh ;) I just thought it was good to have it questioned as I don't think there is such a command.

martinbean's avatar

ahh, not that advanced eh ;)

@m4rinos I think it’s more a case of preventing people running up huge API bills by treated the forum and Lary as a free ChatGPT bot.

m4rinos's avatar

yeah I get that. Still there seems to be some hallucination going on about composer functions which someone at least needs to address? I mean, its not a working example, its confusing. Anyway, I found a way around this for my specific problem with this by resolving the package routes in the app.js with something like this (if anyone is interested):

if (name.startsWith('PackageName/')) {
  page = import(`@packagename/Pages/${name.replace('PackageName/', '')}.vue`); 
} else {
  page = resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue'));
}

Please or to participate in this conversation.