PHPackages                             jhoff/blade-vue-directive - 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. jhoff/blade-vue-directive

ActiveLibrary[Templating & Views](/categories/templating)

jhoff/blade-vue-directive
=========================

Vue directive for Laravel Blade

2.2.0(5y ago)262.7k6[1 PRs](https://github.com/jhoff/blade-vue-directive/pulls)MITPHPPHP >=7.0CI failing

Since Apr 24Pushed 4y ago1 watchersCompare

[ Source](https://github.com/jhoff/blade-vue-directive)[ Packagist](https://packagist.org/packages/jhoff/blade-vue-directive)[ Docs](https://github.com/jhoff/blade-vue-directive)[ RSS](/packages/jhoff-blade-vue-directive/feed)WikiDiscussions master Synced 2w ago

READMEChangelog (9)Dependencies (9)Versions (13)Used By (0)

Laravel Blade Vue Directive
===========================

[](#laravel-blade-vue-directive)

Laravel Blade Vue Directive provides blade directives for vue.js single file and inline template components.

[![Latest Stable Version](https://camo.githubusercontent.com/4a5ff6a1d4f0b27e0e459e2a9e845b055b48d45746e559f37c1e8a4146d9259d/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652f6a686f66662f626c6164652d7675652d6469726563746976652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/jhoff/blade-vue-directive)[![Total Downloads](https://camo.githubusercontent.com/dd17937ac9662ac3b339bacb4f6016efaefc9a3e3147d68d683e6f496b30c065/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6a686f66662f626c6164652d7675652d6469726563746976652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/jhoff/blade-vue-directive)[![MIT License](https://camo.githubusercontent.com/b97cdac2bd9c554b3f31a2dc6aab6da5492dc57c8c455ac9c01935a6d9bf3388/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f6a686f66662f626c6164652d7675652d6469726563746976652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/jhoff/blade-vue-directive)[![Build Status](https://camo.githubusercontent.com/8be061730c5591e53e4ccaa6044ffecc7331f3990a3e1a040249338ab87dd91a/68747470733a2f2f7363727574696e697a65722d63692e636f6d2f672f6a686f66662f626c6164652d7675652d6469726563746976652f6261646765732f6275696c642e706e673f623d6d6173746572)](https://scrutinizer-ci.com/g/jhoff/blade-vue-directive/build-status/master)[![Code Coverage](https://camo.githubusercontent.com/cf9ba85c983c9f2094a49c12b0fda1eb4ec7d8582e250aa6efaafef0faf877d8/68747470733a2f2f7363727574696e697a65722d63692e636f6d2f672f6a686f66662f626c6164652d7675652d6469726563746976652f6261646765732f636f7665726167652e706e673f623d6d6173746572)](https://scrutinizer-ci.com/g/jhoff/blade-vue-directive/?branch=master)[![Scrutinizer Code Quality](https://camo.githubusercontent.com/073a5796c314c90b2e5859f8e6f867b69236f9c12f927fe3bfe9dc5a569c31a2/68747470733a2f2f7363727574696e697a65722d63692e636f6d2f672f6a686f66662f626c6164652d7675652d6469726563746976652f6261646765732f7175616c6974792d73636f72652e706e673f623d6d6173746572)](https://scrutinizer-ci.com/g/jhoff/blade-vue-directive/?branch=master)

- [Upgrade from 1.1.x to 2.0.0](#upgrade-from-11x-to-200)
- [Installation](#installation)
- [Usage](#usage)
    - [Basic Example](#basic-example)
    - [Scalars Example](#scalars-example)
    - [Booleans and Numbers Example](#booleans-and-numbers-example)
    - [Objects and Arrays Example](#objects-and-arrays-example)
    - [camelCase to kebab-case](#camelcase-to-kebab-case)
    - [Using compact to pass variables directly through](#using-compact-to-pass-variables-directly-through)

Upgrade from 1.1.x to 2.0.0
---------------------------

[](#upgrade-from-11x-to-200)

In 2.0, the `@vue` and `@endvue` directives have been renamed to `@inlinevue` and `@endinlinevue`. The new `@vue` and `@endvue` directives should now be used for non-inline components.

**WARNING: You'll need to make sure that you run `php artisan view:clear` after upgrading**

Installation
------------

[](#installation)

To install the Laravel Blade Vue Directive, simply run `composer require jhoff/blade-vue-directive` in a terminal, or if you prefer to manually install you can the following in your `composer.json` file and then run `composer install` from the terminal:

```
{
    "require": {
        "jhoff/blade-vue-directive": "2.*"
    }
}
```

For Laravel 5.5 and later, the package will automatically register. If you're using Laravel before 5.5, then you need to add the provider to the providers array of `config/app.php`.

```
  'providers' => [
    // ...
    Jhoff\BladeVue\DirectiveServiceProvider::class,
    // ...
  ],
```

Usage
-----

[](#usage)

The Laravel Blade Vue Directive was written to be simple and intuitive to use. It's not opinionated about how you use your vue.js components. Simply provide a component name and (optionally) an associative array of properties.

### Basic Example

[](#basic-example)

Using the vue directive with no arguments in your blade file

```
    @vue('my-component')
        Some optional slot content
    @endvue
```

Renders in html as

```

        Some optional slot content

```

Note that the contents between the start and end tag are optional and will be provided as [slot contents](https://vuejs.org/v2/guide/components-slots.html). To use an inline-template, use the `@inlinevue` directive instead:

```
    @inlinevue('my-component')
        Some inline template content
    @endinlinevue
```

Renders in html as

```

        Some inline template content

```

### Scalars Example

[](#scalars-example)

Using the vue directive with an associative array as the second argument will automatically translate into native properties that you can use within your vue.js components.

```
    @vue('page-title', ['title' => 'Welcome to my page'])
        @{{ title }}
    @endvue
```

Renders in html as

```

        {{ title }}

```

Then, to use the properties in your vue.js component, add them to `props` in your component definition. See [Component::props](https://vuejs.org/v2/guide/components.html#Props) for more information.

```
    Vue.component('page-title', {
        props: ['title']
    });
```

### Booleans and Numbers Example

[](#booleans-and-numbers-example)

Properties that are booleans or numeric will be bound automatically as well

```
    @vue('report-viewer', ['show' => true, 'report' => 8675309])
        Report #@{{ report }}
    @endvue
```

Renders in html as

```

        Report #{{ report }}

```

### Objects and Arrays Example

[](#objects-and-arrays-example)

The vue directive will automatically handle any objects or arrays to make sure that vue.js can interact with them without any additional effort.

```
    @vue('welcome-header', ['user' => (object)['name' => 'Jordan Hoff']])
        Welcome @{{ user.name }}!
    @endvue
```

Renders in html as

```

        Welcome {{ user.name }}!

```

Notice that the object is json encoded, html escaped and the property is prepended with `:` to ensure that vue will bind the value as data.

To use an object property in your component, make sure to make it an `Object` type:

```
    Vue.component('welcome-header', {
        props: {
            user: {
                type: Object
            }
        }
    });
```

### camelCase to kebab-case

[](#camelcase-to-kebab-case)

If you provide camel cased property names, they will automatically be converted to kebab case for you. This is especially useful since vue.js will [still work](https://vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case) with camelCase variable names.

```
    @vue('camel-to-kebab', ['camelCasedVariable' => 'value']])
        You can still use it in camelCase see :) @{{ camelCasedVariable }}!
    @endvue
```

Renders in html as

```

        You can still use it in camelCase see :) {{ camelCasedVariable }}!

```

Just make sure that it's still camelCased in the component props definition:

```
    Vue.component('camel-to-kebab', {
        props: ['camelCasedVariable']
    });
```

### Using compact to pass variables directly through

[](#using-compact-to-pass-variables-directly-through)

Just like when you render a view from a controller, you can use compact to pass a complex set of variables directly through to vue:

```

    @vue('compact-variables', compact('one', 'two', 'three'))
        Variables are passed through by name: @{{ one }}, @{{ two }}, @{{ three }}.
    @endvue
```

Renders in html as

```

        Variables are passed through by name: {{ one }}, {{ two }}, {{ three }}.

```

Then in vue, make sure to define all of your properties:

```
    Vue.component('compact-variables', {
        props: ['one', 'two', 'three']
    });
```

###  Health Score

35

—

LowBetter than 77% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity28

Limited adoption so far

Community12

Small or concentrated contributor base

Maturity65

Established project with proven stability

 Bus Factor1

Top contributor holds 66.7% 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 ~140 days

Recently: every ~173 days

Total

10

Last Release

2092d ago

Major Versions

1.1.1 → 2.0.02018-11-12

### Community

Maintainers

![](https://www.gravatar.com/avatar/155e0e6f1ecdebf6c65ac73aa8645a94465341e1c8fe7d2e6d71571970aa4473?d=identicon)[jhoff](/maintainers/jhoff)

---

Top Contributors

[![jhoff](https://avatars.githubusercontent.com/u/627060?v=4)](https://github.com/jhoff "jhoff (2 commits)")[![laravel-shift](https://avatars.githubusercontent.com/u/15991828?v=4)](https://github.com/laravel-shift "laravel-shift (1 commits)")

---

Tags

laravel-5-packagelaravel5vue-componentsvuejs2laravelbladeVue.js

###  Code Quality

TestsPHPUnit

Code StylePHP CS Fixer

### Embed Badge

![Health badge](/badges/jhoff-blade-vue-directive/health.svg)

```
[![Health](https://phpackages.com/badges/jhoff-blade-vue-directive/health.svg)](https://phpackages.com/packages/jhoff-blade-vue-directive)
```

###  Alternatives

[tomatophp/tomato-admin

Tomato Admin Dashboard Build With FilamentPHP Theme for Laravel Splade

578.6k60](/packages/tomatophp-tomato-admin)[tomatophp/tomato-php

Full CRUD Generator for Splade & Breeze Starter Kit

342.3k2](/packages/tomatophp-tomato-php)[djl997/blade-shortcuts

Blade Shortcuts is a library of handy Laravel Blade Directives.

411.0k3](/packages/djl997-blade-shortcuts)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)