You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/docs/frontend/inertia.md
+26-29Lines changed: 26 additions & 29 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,48 +6,28 @@ In short, Inertia let's you use your favourite frontend framework together with
6
6
7
7
## Setting Up
8
8
9
-
We've simplified the whole setup process into one command for you. Whether you are using Leaf MVC or just Leaf, you can use the CLI to scaffold a basic UI integration using your preferred frontend tooling.
9
+
We've simplified the whole setup process into one command for you. Whether you are using Leaf MVC or just Leaf, you can use the CLI to scaffold a basic UI integration using your preferred frontend tooling. Simply run the `view:install` command with the name of the frontend framework you want to use.
10
10
11
11
To get started, you can run:
12
12
13
13
::: code-group
14
14
15
15
```bash:no-line-numbers [Leaf MVC CLI]
16
-
php leaf view:install
17
-
```
18
-
19
-
```bash:no-line-numbers [Leaf CLI]
20
-
leaf view:install
21
-
```
22
-
23
-
:::
24
-
25
-
This will prompt you to select your preferred frontend framework. You can choose from Vue, React, and Svelte. There is also support for styling with Tailwind/Bootstrap. After selecting your preferred framework, Leaf will automatically install and setup inertia for you, including examples for you to get started with.
26
-
27
-
::: tip view:install
28
-
29
-
If you know the specific frontend framework you want to use, you can pass the `--{framework}` flag to the `view:install` command. For example, to install inertia for Vue, you can run:
30
-
31
-
```bash:no-line-numbers
32
16
php leaf view:install --vue
33
-
```
34
-
35
-
:::
36
-
37
-
You can then start your server which will automatically start both your Leaf server and your frontend server:
38
-
39
-
::: code-group
40
-
41
-
```bash:no-line-numbers [Leaf MVC CLI]
42
-
php leaf serve
17
+
php leaf view:install --react
18
+
php leaf view:install --svelte
43
19
```
44
20
45
21
```bash:no-line-numbers [Leaf CLI]
46
-
leaf serve
22
+
leaf view:install --vue
23
+
leaf view:install --react
24
+
leaf view:install --svelte
47
25
```
48
26
49
27
:::
50
28
29
+
This will automatically set up everything you need to get started with Inertia and your preferred frontend framework. You can then start your development server and start building your app.
30
+
51
31
## Setting up your routes
52
32
53
33
Adding Inertia to your Leaf app doesn't change the way you handle routing, it just replaces your PHP views with your frontend framework. This means you are still going to use Leaf's routing system to handle your routes:
@@ -101,7 +81,7 @@ export default function Home({ name }) {
You can find more information on using Inertia with your frontend framework in the [Inertia documentation](https://inertiajs.com/).
140
120
121
+
## Generating Inertia Views
122
+
123
+
Leaf MVC makes your life easier by providing a command to generate views for you. You can use the `g:template` command to generate a new Inertia view:
124
+
125
+
```bash:no-line-numbers
126
+
php leaf g:template Home --jsx # React
127
+
php leaf g:template Home --vue # Vue
128
+
php leaf g:template Home --svelte # Svelte
129
+
php leaf g:template home # Blade
130
+
```
131
+
132
+
You can also specify the directory where you want the view to be generated:
133
+
134
+
```bash:no-line-numbers
135
+
php leaf g:template Home --jsx --dir=components
136
+
```
137
+
141
138
## Manually setting up inertia
142
139
143
140
If you don't want to use the Leaf CLI, you can manually setup inertia. This guide will show you how to setup inertia with Vite and React. You can use this guide to setup inertia with any frontend framework.
0 commit comments