Skip to content

Commit dbe5163

Browse files
reininkreinink
authored
Replace documentation with link to new website
1 parent da6c6ec commit dbe5163

File tree

1 file changed

+1
-184
lines changed

1 file changed

+1
-184
lines changed

‎readme.md‎

Lines changed: 1 addition & 184 deletions
Original file line numberDiff line numberDiff line change
@@ -1,186 +1,3 @@
11
# Inertia.js Laravel Adapter
22

3-
To use [Inertia.js](https://github.com/inertiajs/inertia) you need both a server-side adapter (like this one) as well as a client-side adapter, such as [inertia-vue](https://github.com/inertiajs/inertia-vue). Be sure to also follow the installation instructions for the client-side adapter you choose. This documentation will only cover the Laravel adapter setup.
4-
5-
## Installation
6-
7-
Install using Composer:
8-
9-
~~~sh
10-
composer require inertiajs/inertia-laravel
11-
~~~
12-
13-
## Setup root template
14-
15-
The first step to using Inertia is creating a root template. We recommend using `app.blade.php`. This template should include your assets, as well as the `@inertia` directive.
16-
17-
~~~blade
18-
<!DOCTYPE html>
19-
<html>
20-
<head>
21-
<meta charset="utf-8">
22-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
23-
<link href="{{ mix('/css/app.css') }}" rel="stylesheet">
24-
<script src="{{ mix('/js/app.js') }}" defer></script>
25-
</head>
26-
<body>
27-
28-
@inertia
29-
30-
</body>
31-
</html>
32-
~~~
33-
34-
The `@inertia` directive is simply a helper for creating our base `div`. It includes a `data-page` attribute which contains the inital page information. Here's what that looks like.
35-
36-
~~~blade
37-
<div id="app" data-page="{{ json_encode($page) }}"></div>
38-
~~~
39-
40-
If you'd like to use a different root view, you can change it using `Inertia::setRootView()`.
41-
42-
~~~php
43-
Inertia\Inertia::setRootView('name');
44-
~~~
45-
46-
## Making Inertia responses
47-
48-
To make an Inertia response, use `Inertia::render()`. This function takes two arguments, the component name, and the component data (props).
49-
50-
~~~php
51-
use Inertia\Inertia;
52-
53-
class EventsController extends Controller
54-
{
55-
public function show(Event $event)
56-
{
57-
return Inertia::render('Event', [
58-
'event' => $event->only('id', 'title', 'start_date', 'description'),
59-
]);
60-
}
61-
}
62-
~~~
63-
64-
Alternatively, you can use the `with()` method to include component data (props):
65-
66-
~~~php
67-
use Inertia\Inertia;
68-
69-
class EventsController extends Controller
70-
{
71-
public function show(Event $event)
72-
{
73-
return Inertia::render('Event')
74-
->with('event', $event->only('id', 'title', 'start_date', 'description'));
75-
}
76-
}
77-
~~~
78-
79-
## Following redirects
80-
81-
When making a non-GET Inertia request, via `<inertia-link>` or manually, be sure to still respond with a proper Inertia response. For example, if you're creating a new user, have your "store" endpoint return a redirect back to a standard GET endpoint, such as your user index page. Inertia will automatically follow this redirect and update the page accordingly. Here's a simplified example.
82-
83-
~~~php
84-
class UsersController extends Controller
85-
{
86-
public function index()
87-
{
88-
return Inertia::render('Users/Index', ['users' => User::all()]);
89-
}
90-
91-
public function store()
92-
{
93-
User::create(
94-
Request::validate([
95-
'first_name' => ['required', 'max:50'],
96-
'last_name' => ['required', 'max:50'],
97-
'email' => ['required', 'max:50', 'email'],
98-
])
99-
);
100-
101-
return Redirect::route('users');
102-
}
103-
}
104-
~~~
105-
106-
Note, when redirecting after a `PUT`, `PATCH` or `DELETE` request you must use a `303` response code, otherwise the subsequent request will not be treated as a `GET` request. A `303` redirect is the same as a `302` except that the follow-up request is explicitly changed to a `GET` request.
107-
108-
## Sharing data
109-
110-
To share data with all your components, use `Inertia::share($key, $data)`. This can be done both synchronously and lazily.
111-
112-
~~~php
113-
// Synchronously
114-
Inertia::share('app.name', Config::get('app.name'));
115-
116-
// Lazily
117-
Inertia::share('auth.user', function () {
118-
if (Auth::user()) {
119-
return [
120-
'id' => Auth::user()->id,
121-
'first_name' => Auth::user()->first_name,
122-
'last_name' => Auth::user()->last_name,
123-
];
124-
}
125-
});
126-
127-
// Multiple values
128-
Inertia::share([
129-
// Synchronously
130-
'app' => [
131-
'name' => Config::get('app.name')
132-
],
133-
// Lazily
134-
'auth' => function () {
135-
return [
136-
'user' => Auth::user() ? [
137-
'id' => Auth::user()->id,
138-
'first_name' => Auth::user()->first_name,
139-
'last_name' => Auth::user()->last_name,
140-
] : null
141-
];
142-
}
143-
]);
144-
~~~
145-
146-
You can also get shared data using the same method `Inertia::share($key)`. If the key is not found, `null` is returned.
147-
148-
## Accessing data in root template
149-
150-
There are situations where you may want to access your prop data in your root Blade template. For example, you may want to add a meta description tag, Twitter card meta tags, or Facebook Open Graph meta tags. These props are available via the `$page` variable.
151-
152-
~~~blade
153-
<meta name="twitter:title" content="{{ $page['props']['event']->title }}">
154-
~~~
155-
156-
Sometimes you may even want to provide data that will not be sent to your JavaScript component. You can do this using the `withViewData()` method.
157-
158-
~~~php
159-
return Inertia::render('Event', ['event' => $event])->withViewData(['meta' => $event->meta]);
160-
~~~
161-
162-
You can then access this variable like a regular Blade variable.
163-
164-
~~~blade
165-
<meta name="description" content="{{ $meta }}">
166-
~~~
167-
168-
## Asset versioning
169-
170-
One common challenge with single-page apps is refreshing site assets when they've been changed. Inertia makes this easy by optionally tracking the current version of your site assets. In the event that an asset changes, Inertia will automatically make a hard page visit instead of a normal ajax visit on the next request.
171-
172-
To enable automatic asset refreshing, first call the `Inertia::version($version)` method with your current asset version. We recommend putting this in a service provider.
173-
174-
~~~php
175-
Inertia::version($version);
176-
~~~
177-
178-
If you're using Laravel Mix, you can use the `mix-manifest.json` for this. Here's an example of that using lazy evaluation.
179-
180-
~~~php
181-
Inertia::version(function () {
182-
return md5_file(public_path('mix-manifest.json'));
183-
});
184-
~~~
185-
186-
Finally, make sure you have [versioning](https://laravel.com/docs/mix#versioning-and-cache-busting) setup in your `webpack.mix.js` to enable asset cache busting.
3+
Visit [inertiajs.com](https://inertiajs.com/) to learn more.

0 commit comments

Comments
 (0)