Common Blade-Directives for Internia.js Vue-Adapter

Docs

• Prerequisites
• Installation
• Implementing directives
• Using directives
• Closing line

Prerequisites

Please note

In order to make these directives work, you have to share some data from laravel to vue via inertia-laravel-adapter. Just put this code into app/Providers/AppServiceProvider (or your custom Provider if you want) in boot-method:

use Inertia\Inertia;

...

Inertia::share([
    'auth' => function() {
        return auth()->check();
    },
    'csrf_token' => function() {
        return session()->get('_token');
    },
    'errors' => function() {
        return session()->get('errors', new MessageBag);
    }
]);

If you want to share other data with vue, feel free to add more data to share-array.

Or if you just want to make this package work you can install our helper-package Inertia Laravel Blade Share in your laravel system and you are good to go.

Installation

Install using NPM:

npm install @frogbob/inertia-vue-blade-directives

Install using Yarn:

yarn add @frogbob/inertia-vue-blade-directives

Implementing Directives

import InertiaVueBladeDirectives from '@frogbob/inertia-vue-blade-directives'
Vue.install(InertiaVueBladeDirectives);

Using Directives

Following directive-components are available for now. Hopefully many more will be available in future.

Auth <auth>

The directive may be used to quickly determine if the current user is authenticated:

<auth>Hi, you are logged in!</auth>

Guest <guest>

The directive may be used to quickly determine if the current user is a guest:

<guest>Hi guest!</guest>

Csrf <csrf>

Anytime you define an HTML form in your application, you should include a hidden CSRF token field in the form so that the CSRF protection middleware can validate the request. You may use the directive to include the token field:

<csrf/>

Maybe this is not a useful component since inertia-vue uses ajax for form-requests but for the sake of completeness we included this.

Method <method>

Type: PUT, PATCH, or DELETE

<method type="PUT"/>

Error <error>

The directive may be used to quickly check if validation error messages exist for a given attribute. Within an directive, you may echo the :MESSAGE variable to display the error message:

<error>
    <div class="alert alert-danger">:MESSAGE</div>
</error>

Closing line

Some will ask, why the heck you need vue-components, if you can access data by this.$page? We think inertia.js is awesome. But also we liked blade-directives. In our opinion its much more readable if you see whats going on in your code. If you use tons of this.$page statements in your code this could be a little confusing after a time.

<auth>Hi, Admin</auth> makes clear, all of it slot-content is only shown, if you are a authenticated user, right?

If you have suggestions for missing directives or better code feel free to make pull-requests. Or if you have found a bug, please create an issue and let us know.

Thank you!