PHPackages                             riverskies/laravel-vue-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. [Utility & Helpers](/categories/utility)
4. /
5. riverskies/laravel-vue-component

ActiveLibrary[Utility & Helpers](/categories/utility)

riverskies/laravel-vue-component
================================

Helper package to aid usage of Vue Components within Laravel projects

v1.2(8y ago)201.2k2[1 issues](https://github.com/riverskies/laravel-vue-component/issues)MITPHP

Since May 14Pushed 8y ago2 watchersCompare

[ Source](https://github.com/riverskies/laravel-vue-component)[ Packagist](https://packagist.org/packages/riverskies/laravel-vue-component)[ RSS](/packages/riverskies-laravel-vue-component/feed)WikiDiscussions master Synced 2mo ago

READMEChangelogDependencies (3)Versions (6)Used By (0)

Laravel Vue Component
=====================

[](#laravel-vue-component)

A helper package to aid working with Vue Components in a (non-SPA) Laravel environment. This package makes injecting page-specific Vue Components a breeze.

Sometimes we come across situations where the project is not using Vue extensively, but some pages could highly benefit from it being present. This package aims at those scenarios and makes it possible to (optionally) wrap pages with dedicated Vue components directly from your PHP backend.

### When would you use this package?

[](#when-would-you-use-this-package)

When building a multi-page application there is often a need to inject some Vue magic into specific pages. However, more often then not, as the project grows, the individual script tags get out of control and become very hard to manage.

### How does this package work?

[](#how-does-this-package-work)

The package implements a new Blade directive that you can safely use to wrap your yielded content in your Blade templates. By using this new directive you are able to inject a custom, page-specific Vue component into any of your pages while keeping your scripts modular therefore manageable at the same time.

### Installation

[](#installation)

> **NOTE** - For those with **Laravel 5.2 or before**: please use [v1.0.2](https://github.com/riverskies/laravel-vue-component/tree/1.0.2) instead!!!

Install the package through composer:

```
$ composer require riverskies/laravel-vue-component
```

If you're running Laravel 5.4 or earlier, add the service provider to your **config/app.php** file:

```
Riverskies\Laravel\VueComponent\VueComponentServiceProvider::class,
```

### Usage

[](#usage)

Wrap your yield block in your layout file with the new directive:

```

    @vue($component)
        @yield('content')
    @endvue

```

If you have `$component` variable set on your view...

```
return view('pages.home', ['component' => 'homepage']);
```

...the `content` will be wrapped within a dynamic Vue component:

```

```

To inject the homepage component dynamically, you will need to have the set component (`homepage`) available on your root Vue instance. For example, your app.js file might look like this:

```
import Homepage from './pages/homepage.js';

const app = new Vue({
    el: '#app',
    components: { Homepage }
});
```

### Examples

[](#examples)

#### 1. Simple page injection

[](#1-simple-page-injection)

An example where you connect a blade template to a Vue page instance. Consider following scenario...

In your controller method:

```
return view('pages.contact', ['component' => 'contact']);
```

In your `pages.contact.blade` file (note the wrapping `` and the escaped `@{{ ... }}` syntax):

```
@section('content')

        Contact us

            @{{ error }}

            @{{ message }}
            Submit

@endsection
```

In your `pages/contact.js` file:

```
export default {
    data() {
        return {
            email: '',
            message: '',
            errors: []
        }
    },
    methods: {
        submitForm() {
            // your code to verify/send form data
        }
    }
}
```

And your main `app.js` file to be like this:

```
import Contact from './pages/contact.js';

const app = new Vue({
    el: '#app',
    components: { Contact }
});
```

With above, you are successfully injected VueJS control into your contact page.

#### 2. Sending through data

[](#2-sending-through-data)

Based on Example 1, you can send through data from the backend directly as well. Consider following scenario...

In your controller method:

```
// in your controller method
return view('welcome', [
    'component' => [
        'is' => 'contact',
        'data' => [
            'email' => 'john@example.com'
        ]
    ]
]);
```

In your `pages/contact.js` file:

```
export default {
    props: ['data'],
    data() {
        return {
            email: '',
            message: '',
            errors: [],
            ssData: null
        }
    },
    created() {
        // you must evaluate passed through data!
        this.ssData = eval(this.data);

        this.email = this.ssData.email;
    },
    methods: {
        submitForm() {
            // your code to verify/send form data
        }
    }
}
```

This method can be used to send through data from the backend directly.

###  Health Score

34

—

LowBetter than 77% of packages

Maintenance19

Infrequent updates — may be unmaintained

Popularity26

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity67

Established project with proven stability

 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 ~163 days

Total

5

Last Release

2999d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/5c95f579c623c6c7fe0a5015831ab0bb9e81cf8793dad215ffca8f5bd017872e?d=identicon)[barnabaskecskes](/maintainers/barnabaskecskes)

---

Top Contributors

[![barnabaskecskes](https://avatars.githubusercontent.com/u/3535449?v=4)](https://github.com/barnabaskecskes "barnabaskecskes (17 commits)")

---

Tags

laravellaravel-5-packagevuevue-componentslaravelcomponentvuevue-component

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/riverskies-laravel-vue-component/health.svg)

```
[![Health](https://phpackages.com/badges/riverskies-laravel-vue-component/health.svg)](https://phpackages.com/packages/riverskies-laravel-vue-component)
```

###  Alternatives

[awes-io/table-builder

A component that allows creating responsive HTML tables or lists from data object

4726.1k4](/packages/awes-io-table-builder)

PHPackages © 2026

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