Skip to content
This repository was archived by the owner on Jan 12, 2023. It is now read-only.

Commit f10c3de

Browse files
hotmeteorhotmeteor
authored
Update README.md
1 parent 1230c6e commit f10c3de

File tree

1 file changed

+95
-4
lines changed

1 file changed

+95
-4
lines changed

‎README.md‎

Lines changed: 95 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,105 @@ composer require hotmeteor/inertia-statamic
1414

1515
## Usage
1616

17-
Make sure you have your Inertia template file set at `resources/views/app.blade.php`.
17+
### Setup
18+
19+
The Inertia adapter works for any page or entry content available through Statamic Collections.
20+
21+
By default, all Inertia-enabled pages will be expecting an `app` template, which should be located at `resources/views/app.blade.php`. This is the base page that any Inertia app is looking for, and should contain the `@inertia` directive. The template can be defined either at the collection or page level, but it must be `app`.
22+
23+
```blade
24+
<!DOCTYPE html>
25+
<html>
26+
<head>
27+
<meta charset="utf-8" />
28+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
29+
<link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
30+
<script src="{{ mix('/js/app.js') }}" defer></script>
31+
</head>
32+
<body>
33+
@inertia
34+
</body>
35+
</html>
36+
```
37+
38+
In your `app.js` file you must set up your Inertia app and reference where your Vue pages will live:
39+
```js
40+
// app.js
1841

19-
Any entry or page that is using a template called `app` will use Inertia.js.
42+
import { createApp, h } from 'vue'
43+
import { App, plugin } from '@inertiajs/inertia-vue3'
2044

21-
The `props` will contain all of the attributes and objects from your entry or page.
45+
const el = document.getElementById('app')
46+
47+
createApp({
48+
render: () => h(App, {
49+
initialPage: JSON.parse(el.dataset.page),
50+
resolveComponent: name => require(`./Pages/${name}`).default,
51+
})
52+
}).use(plugin).mount(el)
53+
```
2254

23-
Enjoy!
55+
Finally, you need to create a `Pages` folder in `resources/js`. This is where your app will be looking for Vue components that match the resolved naming of your Statamic pages.
2456

57+
```sh
58+
|_ resources
59+
|_ js
60+
|_ Pages
61+
|_ About
62+
|_ Team.vue
63+
|_ Home.vue
64+
```
65+
66+
Both [server-side setup](https://inertiajs.com/server-side-setup) and [client-side setup](https://inertiajs.com/client-side-setup) full instructions are available on Inertia's website.
67+
68+
### Component Naming
69+
70+
As you can see in the folder structure above, your Vue component naming and location must match the Statamic collection hierarchy + page slug combo for any Inertia-enabled pages. The adapter will automatically build these paths based on the page's URL and slug.
71+
72+
Here are some examples of what this looks like:
73+
74+
Statamic Collection | Statamic Page | Slug | URL | Component Name
75+
------------ | ------------- | ------------- | ------------- | -------------
76+
Home | Home | `home` | / | `Home.vue`
77+
Marketing | Overview | `overview` | /marketing/ | `Marketing/Overview.vue`
78+
Marketing | Logos and Colors | `logos-and-colors` | /marketing/logos | `Marketing/LogosAndColors.vue`
79+
80+
### Props
81+
82+
All the typical data passed to a Statamic page as objects will now be available to your page as `props`. The `props` will contain all of the expected attributes and data. For example, the Inertia response's `props` object could look like:
83+
84+
```php
85+
Inertia\Response {#2587 ▼
86+
#component: "Marketing/Overview"
87+
#props: array:22 [▼
88+
"amp_url" => null
89+
"api_url" => null
90+
"collection" => array:3 [▶]
91+
"content" => array:4 [▶]
92+
"date" => Illuminate\Support\Carbon @1617827556 {#2478 ▶}
93+
"edit_url" => "http://mysite.test/cp/collections/marketing/entries/f854a1cf-0dcf-404b-8418-a74662ba77e7/overview"
94+
"id" => "f854a1cf-0dcf-404b-8418-a74662ba77e7"
95+
"is_entry" => true
96+
"last_modified" => Illuminate\Support\Carbon @1617827556 {#2477 ▶}
97+
"mount" => null
98+
"order" => null
99+
"parent" => null
100+
"permalink" => "http://mysite.test/marketing"
101+
"private" => false
102+
"published" => true
103+
"slug" => "overview"
104+
"template" => "app"
105+
"title" => "Overview"
106+
"updated_at" => Illuminate\Support\Carbon @1617827556 {#2523 ▶}
107+
"updated_by" => array:4 [▶]
108+
"uri" => "/marketing"
109+
"url" => "/marketing"
110+
]
111+
#rootView: "app"
112+
#version: ""
113+
#viewData: []
114+
}
115+
```
25116

26117
## Credits
27118

0 commit comments

Comments
 (0)