README

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:

<section>
    <h1>Media</h1>

    @mount('media-uploader', [
        'initial' => $media,
    ])
</section>

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

resources/
  js/
    components/
      admin/
        dashboard.js
    app.js

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

Installation

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));

views.mount();

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));

views.mount();

Usage

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.

<?php

return [
    'layout' => 'layouts.app',
];

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

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

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', () => {
    views.mount();
});

Testing

composer test

Changelog

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

Contributing

Please see CONTRIBUTING for details.

Security

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

Postcardware

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.

Credits

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.

License

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

spatie / laravel-javascript-views

Maintainers

Details

Add Maintainer

Remove Maintainer