Add the repo to your composer.json file:
"repositories": [
{
"url": "https://github.com/parallax/laravel-js-views.git",
"type": "git"
}
]$ composer require parallax/laravel-js-views
If you’re starting a new Laravel project with Laravel Mix you can get set up quickly by using one of the laravel-js-views presets:
views:preactviews:vue
$ php artisan preset views:preactAdd laravel-js-views to your Laravel Mix configuration:
let mix = require('laravel-mix')
+ require('./vendor/parallax/laravel-js-views')
+ mix.views()Add a new npm script to package.json which compiles client and server versions of your views for production:
"build": "cross-env LARAVEL_ENV=client npm run prod && cross-env LARAVEL_ENV=server npm run prod"
Create a blade layout in your /resources/views directory, for example /resources/views/layouts/default.blade.php:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example</title>
</head>
<body>
@yield('html')
<script src="{{ mix('/js/main.js') }}"></script>
</body>
</html>Create your view components in the /resources/views directory, for example /resources/views/home.js
import { h, Component } from 'preact'
let Home = () => <h1>Hello, world</h1>
export default HomeRender the view like you would any blade view:
// /routes/web.php
Route::view('/', 'home');You can pass data to a view in the same way you pass data to a blade view:
// /routes/web.php
Route::view('/', 'home', ['title' => 'Hello, world']);The data is then passed into the home.js component as props:
import { h } from 'preact'
let Home = ({ title }) => <h1>{title}</h1>
export default Home