Using Laravel Inertia.js, Vue and Blade in parallel?

Question

Is there a way to use Laravel Blade for one part of a multipage site (e-commerce), and Inertia/Vue for some specific pages (like the basket and the admin pages)? Not mixing the two on the same pages, as I see it done with other commentaries.

The first category is a load of pages that are merely static, need fast loading and robust SEO referencing (product pages and catalogues). The second do not need to be indexed, but need a lot of user interactions.

I have tried a few things with my first project, but I don’t seem to be able to call Laravel routes when Inertia is active. Plus it would not really make sense to load all Inertia and Vue in the Blade pages. So as a starter I guess I would need to load the Inertia + Vue code only on the Vue pages (admin and basket). And I guess there are a lot of other issues to take care of.

Or maybe scrap Inertia.js, and just load vanilla Vue.js on the Vue pages? But then that means loading the router and the datastore as well...

Many thanks for any idea on the best way to proceed! E.

Answer 1

You can mix pages as you want:

1. For Inertia pages.

    // View:
    <inertia-link href="/dashboard">dashboard</inertia-link>

    // Laravel controller:
    public function index(Request $request)
    {
        return Inertia::render('Dashboard/Index', [
            'data' => [
                // ...
            ],
        ]);
    }

2. Blade pages.

    // View:
    <a href="/dashboard">dashboard</a>

    // Laravel controller:
    public function index(Request $request)
    {
        return view('dashboard.index', [
            'data' => [
                // ...
            ],
        ]);
    }