PHPackages lootmarket/laravel-vue-blade-component - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. lootmarket/laravel-vue-blade-component ActiveLibrary[Templating & Views](/categories/templating) lootmarket/laravel-vue-blade-component ====================================== Jankless Vue Components in Laravel Blade Templates 0.1.1(8y ago)224.3k↓90%3[3 issues](https://github.com/lootmarket/laravel-vue-blade-component/issues)MITPHPPHP >=5.6 Since Aug 8Pushed 8y ago4 watchersCompare [ Source](https://github.com/lootmarket/laravel-vue-blade-component)[ Packagist](https://packagist.org/packages/lootmarket/laravel-vue-blade-component)[ Docs](https://github.com/lootmarket/laravel-vue-blade-component)[ RSS](/packages/lootmarket-laravel-vue-blade-component/feed)WikiDiscussions master Synced 3w ago READMEChangelog (5)DependenciesVersions (8)Used By (0) [![](logo.png)](logo.png) What is Laravel Vue Blade Directive? ------------------------------------ [](#what-is-laravel-vue-blade-directive) Originally inspired by [Faking Server-Side Rendering With Vue.js and Laravel by Anthony Gore](https://vuejsdevelopers.com/2017/04/09/vue-laravel-fake-server-side-rendering/), Laravel Vue Blade Directive package is meant to provide tools to build static PHP and Vue Templates in tandem. 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. 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. Proof Of Concept Demo --------------------- [](#proof-of-concept-demo) [Original POC Repo](https://github.com/unr/laravel-vue-hydrate) [![Example Of Jankless Vue Component](https://camo.githubusercontent.com/d217ca1d6120a7adc217027bb4f38e948eba237c/687474703a2f2f756e722e696d2f3244315932773048316e33722f636f6e74656e74)](https://camo.githubusercontent.com/d217ca1d6120a7adc217027bb4f38e948eba237c/687474703a2f2f756e722e696d2f3244315932773048316e33722f636f6e74656e74) Installation ------------ [](#installation) You can install the package via composer: ``` composer require lootmarket/laravel-vue-blade-component ``` ### Provider [](#provider) Then add the ServiceProvider to your `config/app.php` file: ``` 'providers' => [ ... LootMarket\VueComponent\VueComponentServiceProvider::class ... ]; ``` How to Use Laravel Vue Blade Directive -------------------------------------- [](#how-to-use-laravel-vue-blade-directive) ### Guides [](#guides) 1. [A Simple Vue Instance](docs/simple-vue-instance.md) 2. [Toggling an Element with v-if && v-show](docs/toggling-vue-elements.md) ### Documentation [](#documentation) Super lighteweight documentation below. Please let us know if there's something more descriptive you needed. #### `@vueComponent(, )` [](#vuecomponentcomponent-name-optional-path) Blade Directive for rendering our Vue Components. **component-name** file name of the component to be rendered. **path** optionally provide a path to the component if nested in a subfolder. usage example: ``` @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](https://laravel.com/docs/5.4/blade#stacks) called `vue` #### `@vue(, )` [](#vuejsvariable-phpvariable) Blade Directive for displaying `{{ variableFromVueJS }}` or `$phpVariable` written to dom. This is used within a `@vueComponent` file. 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. usage example: ``` @vue('$store.state.username', $initialState['username']) ``` When used within a `@vueComponent()` template, it will return: the result of `` to the dom. the string `{{ $store.state.username }}` to the js template. This allows us to declare a vuex variable in vue template, and echo out the initial state to the server rendered php. #### `@v()` [](#vjsvariablestring) 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. This is used by `@vue()`, but can be called directly if needed. usage example: ``` @v($store.state.username) ``` this will simply return the string `{{ $store.state.username }}` to be used within vue. #### `@stack('vue')` [](#stackvue) This is a native function with Laravel 5.4 Blades - it will render out the js template for each component passed to `@vueComponent()` Each component is only rendered once, not multiple times if done in a loop. About LootMarket ---------------- [](#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. License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 30 — LowBetter than 62% of packages Maintenance17 Infrequent updates — may be unmaintained Popularity27 Limited adoption so far Community11 Small or concentrated contributor base Maturity53 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~2 days Total 5 Last Release 3235d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/edf3473405f5694bf4db7dedc3f60aca5df5f459e4838b9741a57abd6451f29e?d=identicon)[iamunr](/maintainers/iamunr) --- Top Contributors [![unr](https://avatars.githubusercontent.com/u/317957?v=4)](https://github.com/unr "unr (20 commits)") --- Tags lootmarketlaravel-vue-blade-componentlaravel-vuejankless ### Embed Badge ![Health badge](/badges/lootmarket-laravel-vue-blade-component/health.svg) ``` [![Health](https://phpackages.com/badges/lootmarket-laravel-vue-blade-component/health.svg)](https://phpackages.com/packages/lootmarket-laravel-vue-blade-component) ``` ### Alternatives [limenius/react-bundle Client and Server-side react rendering in a Symfony Bundle 3861.2M](/packages/limenius-react-bundle)[area17/laravel-auto-head-tags Laravel Auto Head Tags helps you build the list of head elements for your app 4616.0k](/packages/area17-laravel-auto-head-tags)[jelix/wikirenderer WikiRenderer is a library to generate HTML or anything else from wiki content. 1712.2k1](/packages/jelix-wikirenderer)[webkinder/sproutset A Composer package for handling responsive images in Roots Bedrock + Sage + Blade projects. 291.8k](/packages/webkinder-sproutset) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)