This package's canonical repository appears to be gone and the package has been frozen as a result.

0.2.1 2019-03-04 13:55 UTC

This package is auto-updated.

Last update: 2019-06-09 02:19:48 UTC


Latest Version on Packagist Build Status Quality Score Total Downloads

Mount JavaScript components as full page documents in Blade views.

As a full page document:

namespace App\Http\Controllers;

use App\User;

class UsersController
    public function index()
        $users = User::all();

        return mount('users', [
            $users => 'users',

As a widget in a view:


    @mount('media-uploader', [
        'initial' => $media,

With Webpack, you can register all components under a root path so mount behaves just like Laravel Blade views.

return mount('admin.dashboard', $data);


You can install the package via composer:

composer require spatie/laravel-javascript-views

Next, you'll need to set up the package in your scripts. Assuming you're using Webpack (or Laravel Mix), this will register all Vue components in the specified directory.

import views from 'laravel-javascript-views';
import vue from 'laravel-javascript-views/vue';
import createComponents from 'laravel-javascript-views/webpack';

const context = require.context('./pages', true, /\.js$/);

views.load(createComponents(context, vue));


React is also supported:

import views from 'laravel-javascript-views';
import react from 'laravel-javascript-views/react';
import createComponents from 'laravel-javascript-views/webpack';

const context = require.context('./pages', true, /\.js$/);

views.load(createComponents(context, react));



As documents

mount works just like a Laravel view. You can pass data as the second function argument, or by chaining with calls.

return mount('admin.dashboard', ['stats' => $stats]);
return mount('admin.dashboard')->with(['stats' => $stats]);
return mount('admin.dashboard')->with('stats', $stats);

The component will be mounted in a configured layout view. The default layout can be set in config.


return [
    'layout' => '',

The above expects a Blade view to exist that echoes a $slot variable where the component should be mounted.

<!doctype html>
        <script defer src="{{ mix('js/app.js') }}"></script>
        {{ $slot }}

As widgets

@mount works just like a Blade @include directive. You can pass data as the second directive argument.

@mount('media-uploader', [
    'initial' => $media,

View composers

views is compatible with your application's existing view composers. All data will be passed as props to the created component.

JavaScriptView::composer('profile.*', function ($view) {
    $view->with('user', Auth::user());

With Turbolinks

If you're building a Turbolinks application, you'll need to mount the components on every page load.

window.addEventListener('turbolinks:load', () => {


composer test


Please see CHANGELOG for more information on what has changed recently.


Please see CONTRIBUTING for details.


If you discover any security related issues, please email instead of using the issue tracker.


You're free to use this package, but if it makes it to your production environment we highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using.

Our address is: Spatie, Samberstraat 69D, 2060 Antwerp, Belgium.

We publish all received postcards on our company website.


Support us

Spatie is a webdesign agency based in Antwerp, Belgium. You'll find an overview of all our open source projects on our website.

Does your business depend on our contributions? Reach out and support us on Patreon. All pledges will be dedicated to allocating workforce on maintenance and new awesome stuff.


The MIT License (MIT). Please see License File for more information.