library laravel-vue-blade-component

lootmarket/laravel-vue-blade-component

Jankless Vue Components in Laravel Blade Templates

, _(*1)

What is Laravel Vue Blade Directive?

Originally inspired by Faking Server-Side Rendering With Vue.js and Laravel by Anthony Gore, Laravel Vue Blade Directive package is meant to provide tools to build static PHP and Vue Templates in tandem., _(*2)

This is not meant to replace a full SSR application, but to facilitate jankless Vue Components within Blade Templates. For example, a dynamically updated sidebar component, that is statically rendered by PHP on first load., _(*3)

The goal instead is to be capable of writing a single Component in a blade file, include it with @vueComponent(sidebar) and have it dynamically produce both the static PHP, and the vuejs template. This will then cleanly hydrate on the Vue instance with no jank., _(*4)

Proof Of Concept Demo

Original POC Repo, _(*5)

, _(*6)

Installation

You can install the package via composer:, _(*7)

composer require lootmarket/laravel-vue-blade-component

Provider

Then add the ServiceProvider to your config/app.php file:, _(*8)

'providers' => [
    ...

    LootMarket\VueComponent\VueComponentServiceProvider::class

    ...
];

How to Use Laravel Vue Blade Directive

Guides

1. A Simple Vue Instance
2. Toggling an Element with v-if && v-show

Documentation

Super lighteweight documentation below. Please let us know if there's something more descriptive you needed., _(*9)

@vueComponent(<component-name>, <optional path>)

Blade Directive for rendering our Vue Components., _(*10)

component-name file name of the component to be rendered., _(*11)

path optionally provide a path to the component if nested in a subfolder., _(*12)

usage example:, _(*13)

@vueComponent(App)

this loads resources/views/App.blade.php

@vueComponent(App, vue/routes)

this loads resources/views/vue/routes/App.blade.php

Templates loaded via @vueComponent will have $vue passed to them as a boolean. Additionally, they will be pushed to a stack called vue, _(*14)

@vue(<jsVariable>, <phpVariable>)

Blade Directive for displaying {{ variableFromVueJS }} or $phpVariable written to dom. This is used within a @vueComponent file., _(*15)

If $vue is true, will simply echo out the php variable passed. If $vue is false, will echo out a string to be interpreted within a javascript template., _(*16)

usage example:, _(*17)

@vue('$store.state.username', $initialState['username'])

When used within a @vueComponent() template, it will return:, _(*18)

the result of <?php echo $initialState['username'] ?> to the dom., _(*19)

the string {{ $store.state.username }} to the js template., _(*20)

This allows us to declare a vuex variable in vue template, and echo out the initial state to the server rendered php., _(*21)

@v(<jsVariableString>)

A simple blade directive for taking a string, and echoing it with {{ string }} to the dom. This allows us to easily write in js variables for our vue templates., _(*22)

This is used by @vue(), but can be called directly if needed., _(*23)

usage example:, _(*24)

@v($store.state.username)

this will simply return the string {{ $store.state.username }} to be used within vue., _(*25)

@stack('vue')

This is a native function with Laravel 5.4 Blades - it will render out the js template for each component passed to @vueComponent(), _(*26)

Each component is only rendered once, not multiple times if done in a loop., _(*27)

About LootMarket

LootMarket is a development team based in Toronto, Ontario focused on creating great experiences around esports. In our quest for the ultimate PHP & Vue experience, we've created this., _(*28)

License

The MIT License (MIT). Please see License File for more information., _(*29)