Skip to content

Commit bb8173e

Browse files
joetannenbaumjoetannenbaum
committed
wip
1 parent 37bf6a1 commit bb8173e

File tree

7 files changed

+235
-197
lines changed

7 files changed

+235
-197
lines changed

‎snippets/client-specific.jsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export const ClientSpecific = ({ children }) => {
2+
// What's this you ask? It's me getting around some mintlify wildness
3+
// I don't know why this works, but it does. Mintlify you crazy.
4+
const [nada, setNada] = useState();
5+
6+
return children;
7+
};

‎v1/advanced/server-side-rendering.mdx‎

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
title: Server-Side Rendering (SSR)
33
---
44

5+
import { ClientSpecific } from "/snippets/client-specific.jsx"
56
import { VueSpecific } from "/snippets/vue-specific.jsx"
67
import { ReactSpecific } from "/snippets/react-specific.jsx"
78
import { SvelteSpecific } from "/snippets/svelte-specific.jsx"
@@ -156,7 +157,7 @@ export default defineConfig({
156157
plugins: [
157158
laravel({
158159
input: ['resources/css/app.css', 'resources/js/app.js'],
159-
\+ ssr: 'resources/js/ssr.js',
160+
+ ssr: 'resources/js/ssr.js',
160161
refresh: true,
161162
}),
162163
// ...
@@ -171,8 +172,8 @@ Next, let's update the `build` script in our `package.json` file to also build o
171172
```diff
172173
"scripts": {
173174
"dev": "vite",
174-
\- "build": "vite build"
175-
\+ "build": "vite build && vite build --ssr"
175+
- "build": "vite build"
176+
+ "build": "vite build && vite build --ssr"
176177
},
177178
```
178179

@@ -209,8 +210,8 @@ Since your website is now being server-side rendered, you can instruct <VueSpeci
209210
```
210211

211212
```diff Vue 3
212-
\- import { createApp, h } from 'vue'
213-
\+ import { createSSRApp, h } from 'vue'
213+
- import { createApp, h } from 'vue'
214+
+ import { createSSRApp, h } from 'vue'
214215
import { createInertiaApp } from '@inertiajs/vue3'
215216

216217
createInertiaApp({
@@ -219,8 +220,8 @@ Since your website is now being server-side rendered, you can instruct <VueSpeci
219220
return pages[`./Pages/${name}.vue`]
220221
},
221222
setup({ el, App, props, plugin }) {
222-
\- createApp({ render: () => h(App, props) })
223-
\+ createSSRApp({ render: () => h(App, props) })
223+
- createApp({ render: () => h(App, props) })
224+
+ createSSRApp({ render: () => h(App, props) })
224225
.use(plugin)
225226
.mount(el)
226227
},
@@ -229,17 +230,17 @@ Since your website is now being server-side rendered, you can instruct <VueSpeci
229230

230231
```diff React icon="react"
231232
import { createInertiaApp } from '@inertiajs/react'
232-
\- import { createRoot } from 'react-dom/client'
233-
\+ import { hydrateRoot } from 'react-dom/client'
233+
- import { createRoot } from 'react-dom/client'
234+
+ import { hydrateRoot } from 'react-dom/client'
234235

235236
createInertiaApp({
236237
resolve: name => {
237238
const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true })
238239
return pages[`./Pages/${name}.jsx`]
239240
},
240241
setup({ el, App, props }) {
241-
\- createRoot(el).render(<App {...props} />)
242-
\+ hydrateRoot(el, <App {...props} />)
242+
- createRoot(el).render(<App {...props} />)
243+
+ hydrateRoot(el, <App {...props} />)
243244
},
244245
})
245246
```
@@ -256,12 +257,12 @@ Since your website is now being server-side rendered, you can instruct <VueSpeci
256257
ssr: 'resources/js/ssr.js',
257258
refresh: true,
258259
}),
259-
\- svelte(),
260-
\+ svelte({
261-
\+ compilerOptions: {
262-
\+ hydratable: true,
263-
\+ },
264-
\+ }),
260+
- svelte(),
261+
+ svelte({
262+
+ compilerOptions: {
263+
+ hydratable: true,
264+
+ },
265+
+ }),
265266
],
266267
})
267268
```
@@ -278,12 +279,12 @@ Since your website is now being server-side rendered, you can instruct <VueSpeci
278279
const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true })
279280
return pages[`./Pages/${name}.svelte`]
280281
},
281-
\- setup({ el, App, props }) {
282-
\- new App({ target: el, props })
283-
\- },
284-
\+ setup({ el, App }) {
285-
\+ new App({ target: el, hydrate: true })
286-
\+ },
282+
- setup({ el, App, props }) {
283+
- new App({ target: el, props })
284+
- },
285+
+ setup({ el, App }) {
286+
+ new App({ target: el, hydrate: true })
287+
+ },
287288
})
288289
```</SvelteSpecific>## Deployment
289290

‎v1/getting-started/upgrade-guide.mdx‎

Lines changed: 93 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -75,122 +75,122 @@ Here is a complete list of all the import changes:
7575
<CodeGroup>
7676

7777
```diff Vue 2
78-
\- import { Inertia } from '@inertiajs/inertia'
79-
\+ import { router } from '@inertiajs/vue2'
80-
81-
\- import createServer from '@inertiajs/server'
82-
\+ import createServer from '@inertiajs/vue2/server'
83-
84-
\- import { createInertiaApp } from '@inertiajs/inertia-vue'
85-
\- import { App } from '@inertiajs/inertia-vue'
86-
\- import { app } from '@inertiajs/inertia-vue'
87-
\- import { InertiaApp } from '@inertiajs/inertia-vue'
88-
\- import { plugin } from '@inertiajs/inertia-vue'
89-
\+ import { createInertiaApp } from '@inertiajs/vue2'
90-
91-
\- import { Head } from '@inertiajs/inertia-vue'
92-
\- import { InertiaHead } from '@inertiajs/inertia-vue'
93-
\+ import { Head } from '@inertiajs/vue2'
94-
95-
\- import { Link } from '@inertiajs/inertia-vue'
96-
\- import { link } from '@inertiajs/inertia-vue'
97-
\- import { InertiaLink } from '@inertiajs/inertia-vue'
98-
\+ import { Link } from '@inertiajs/vue2'
78+
- import { Inertia } from '@inertiajs/inertia'
79+
+ import { router } from '@inertiajs/vue2'
80+
81+
- import createServer from '@inertiajs/server'
82+
+ import createServer from '@inertiajs/vue2/server'
83+
84+
- import { createInertiaApp } from '@inertiajs/inertia-vue'
85+
- import { App } from '@inertiajs/inertia-vue'
86+
- import { app } from '@inertiajs/inertia-vue'
87+
- import { InertiaApp } from '@inertiajs/inertia-vue'
88+
- import { plugin } from '@inertiajs/inertia-vue'
89+
+ import { createInertiaApp } from '@inertiajs/vue2'
90+
91+
- import { Head } from '@inertiajs/inertia-vue'
92+
- import { InertiaHead } from '@inertiajs/inertia-vue'
93+
+ import { Head } from '@inertiajs/vue2'
94+
95+
- import { Link } from '@inertiajs/inertia-vue'
96+
- import { link } from '@inertiajs/inertia-vue'
97+
- import { InertiaLink } from '@inertiajs/inertia-vue'
98+
+ import { Link } from '@inertiajs/vue2'
9999
```
100100

101101
```diff Vue 3
102-
\- import { Inertia } from '@inertiajs/inertia'
103-
\+ import { router } from '@inertiajs/vue3'
102+
- import { Inertia } from '@inertiajs/inertia'
103+
+ import { router } from '@inertiajs/vue3'
104104

105-
\- import createServer from '@inertiajs/server'
106-
\+ import createServer from '@inertiajs/vue3/server'
105+
- import createServer from '@inertiajs/server'
106+
+ import createServer from '@inertiajs/vue3/server'
107107

108-
\- import { createInertiaApp } from '@inertiajs/inertia-vue3'
109-
\- import { App } from '@inertiajs/inertia-vue3'
110-
\- import { app } from '@inertiajs/inertia-vue3'
111-
\- import { plugin } from '@inertiajs/inertia-vue3'
112-
\- import { InertiaApp } from '@inertiajs/inertia-vue3'
113-
\+ import { createInertiaApp } from '@inertiajs/vue3'
108+
- import { createInertiaApp } from '@inertiajs/inertia-vue3'
109+
- import { App } from '@inertiajs/inertia-vue3'
110+
- import { app } from '@inertiajs/inertia-vue3'
111+
- import { plugin } from '@inertiajs/inertia-vue3'
112+
- import { InertiaApp } from '@inertiajs/inertia-vue3'
113+
+ import { createInertiaApp } from '@inertiajs/vue3'
114114

115-
\- import { usePage } from '@inertiajs/inertia-vue3'
116-
\+ import { usePage } from '@inertiajs/vue3'
115+
- import { usePage } from '@inertiajs/inertia-vue3'
116+
+ import { usePage } from '@inertiajs/vue3'
117117

118-
\- import { useForm } from '@inertiajs/inertia-vue3'
119-
\+ import { useForm } from '@inertiajs/vue3'
118+
- import { useForm } from '@inertiajs/inertia-vue3'
119+
+ import { useForm } from '@inertiajs/vue3'
120120

121-
\- import { useRemember } from '@inertiajs/inertia-vue3'
122-
\+ import { useRemember } from '@inertiajs/vue3'
121+
- import { useRemember } from '@inertiajs/inertia-vue3'
122+
+ import { useRemember } from '@inertiajs/vue3'
123123

124-
\- import { Head } from '@inertiajs/inertia-vue3'
125-
\- import { InertiaHead } from '@inertiajs/inertia-vue3'
126-
\+ import { Head } from '@inertiajs/vue3'
124+
- import { Head } from '@inertiajs/inertia-vue3'
125+
- import { InertiaHead } from '@inertiajs/inertia-vue3'
126+
+ import { Head } from '@inertiajs/vue3'
127127

128-
\- import { Link } from '@inertiajs/inertia-vue3'
129-
\- import { link } from '@inertiajs/inertia-vue3'
130-
\- import { InertiaLink } from '@inertiajs/inertia-vue3'
131-
\+ import { Link } from '@inertiajs/vue3'
128+
- import { Link } from '@inertiajs/inertia-vue3'
129+
- import { link } from '@inertiajs/inertia-vue3'
130+
- import { InertiaLink } from '@inertiajs/inertia-vue3'
131+
+ import { Link } from '@inertiajs/vue3'
132132
```
133133

134134
```diff React icon="react"
135-
\- import { Inertia } from '@inertiajs/inertia'
136-
\+ import { router } from '@inertiajs/react'
135+
- import { Inertia } from '@inertiajs/inertia'
136+
+ import { router } from '@inertiajs/react'
137137

138-
\- import createServer from '@inertiajs/server'
139-
\+ import createServer from '@inertiajs/react/server'
138+
- import createServer from '@inertiajs/server'
139+
+ import createServer from '@inertiajs/react/server'
140140

141-
\- import { createInertiaApp } from '@inertiajs/inertia-react'
142-
\- import { App } from '@inertiajs/inertia-react'
143-
\- import { app } from '@inertiajs/inertia-react'
144-
\- import { InertiaApp } from '@inertiajs/inertia-react'
145-
\+ import { createInertiaApp } from '@inertiajs/react'
141+
- import { createInertiaApp } from '@inertiajs/inertia-react'
142+
- import { App } from '@inertiajs/inertia-react'
143+
- import { app } from '@inertiajs/inertia-react'
144+
- import { InertiaApp } from '@inertiajs/inertia-react'
145+
+ import { createInertiaApp } from '@inertiajs/react'
146146

147-
\- import { usePage } from '@inertiajs/inertia-react'
148-
\+ import { usePage } from '@inertiajs/react'
147+
- import { usePage } from '@inertiajs/inertia-react'
148+
+ import { usePage } from '@inertiajs/react'
149149

150-
\- import { useForm } from '@inertiajs/inertia-react'
151-
\+ import { useForm } from '@inertiajs/react'
150+
- import { useForm } from '@inertiajs/inertia-react'
151+
+ import { useForm } from '@inertiajs/react'
152152

153-
\- import { useRemember } from '@inertiajs/inertia-react'
154-
\- import { useRememberedState } from '@inertiajs/inertia-react'
155-
\+ import { useRemember } from '@inertiajs/react'
153+
- import { useRemember } from '@inertiajs/inertia-react'
154+
- import { useRememberedState } from '@inertiajs/inertia-react'
155+
+ import { useRemember } from '@inertiajs/react'
156156

157-
\- import { Head } from '@inertiajs/inertia-react'
158-
\- import { InertiaHead } from '@inertiajs/inertia-react'
159-
\+ import { Head } from '@inertiajs/react'
157+
- import { Head } from '@inertiajs/inertia-react'
158+
- import { InertiaHead } from '@inertiajs/inertia-react'
159+
+ import { Head } from '@inertiajs/react'
160160

161-
\- import { Link } from '@inertiajs/inertia-react'
162-
\- import { link } from '@inertiajs/inertia-react'
163-
\- import { InertiaLink } from '@inertiajs/inertia-react'
164-
\+ import { Link } from '@inertiajs/react'
161+
- import { Link } from '@inertiajs/inertia-react'
162+
- import { link } from '@inertiajs/inertia-react'
163+
- import { InertiaLink } from '@inertiajs/inertia-react'
164+
+ import { Link } from '@inertiajs/react'
165165
```
166166

167167
```diff Svelte icon="s"
168-
\- import { Inertia } from '@inertiajs/inertia'
169-
\+ import { router } from '@inertiajs/svelte'
168+
- import { Inertia } from '@inertiajs/inertia'
169+
+ import { router } from '@inertiajs/svelte'
170170

171-
\- import { createInertiaApp } from '@inertiajs/inertia-svelte'
172-
\- import { App } from '@inertiajs/inertia-svelte'
173-
\- import { app } from '@inertiajs/inertia-svelte'
174-
\- import { InertiaApp } from '@inertiajs/inertia-svelte'
175-
\+ import { createInertiaApp } from '@inertiajs/svelte'
171+
- import { createInertiaApp } from '@inertiajs/inertia-svelte'
172+
- import { App } from '@inertiajs/inertia-svelte'
173+
- import { app } from '@inertiajs/inertia-svelte'
174+
- import { InertiaApp } from '@inertiajs/inertia-svelte'
175+
+ import { createInertiaApp } from '@inertiajs/svelte'
176176

177-
\- import { page } from '@inertiajs/inertia-svelte'
178-
\+ import { page } from '@inertiajs/svelte'
177+
- import { page } from '@inertiajs/inertia-svelte'
178+
+ import { page } from '@inertiajs/svelte'
179179

180-
\- import { inertia } from '@inertiajs/inertia-svelte'
181-
\+ import { inertia } from '@inertiajs/svelte'
180+
- import { inertia } from '@inertiajs/inertia-svelte'
181+
+ import { inertia } from '@inertiajs/svelte'
182182

183-
\- import { useForm } from '@inertiajs/inertia-svelte'
184-
\+ import { useForm } from '@inertiajs/svelte'
183+
- import { useForm } from '@inertiajs/inertia-svelte'
184+
+ import { useForm } from '@inertiajs/svelte'
185185

186-
\- import { useRemember } from '@inertiajs/inertia-svelte'
187-
\- import { remember } from '@inertiajs/inertia-svelte'
188-
\+ import { remember } from '@inertiajs/svelte'
186+
- import { useRemember } from '@inertiajs/inertia-svelte'
187+
- import { remember } from '@inertiajs/inertia-svelte'
188+
+ import { remember } from '@inertiajs/svelte'
189189

190-
\- import { Link } from '@inertiajs/inertia-svelte'
191-
\- import { link } from '@inertiajs/inertia-svelte'
192-
\- import { InertiaLink } from '@inertiajs/inertia-svelte'
193-
\+ import { Link } from '@inertiajs/svelte'
190+
- import { Link } from '@inertiajs/inertia-svelte'
191+
- import { link } from '@inertiajs/inertia-svelte'
192+
- import { InertiaLink } from '@inertiajs/inertia-svelte'
193+
+ import { Link } from '@inertiajs/svelte'
194194
```
195195

196196
</CodeGroup>
@@ -226,8 +226,8 @@ npm remove @inertiajs/progress
226226
Next, remove the `InertiaProgress` import and `InertiaProgress.init()` call, as they are no longer required.
227227

228228
```diff
229-
\- import { InertiaProgress } from '@inertiajs/progress'
230-
\- InertiaProgress.init()
229+
- import { InertiaProgress } from '@inertiajs/progress'
230+
- InertiaProgress.init()
231231
```
232232

233233
Finally, if you have defined any progress customizations, you can move them to the `progress`property of the `createInertiaApp()` helper.
@@ -257,8 +257,8 @@ We've removed the previously deprecated lowercase `app` argument from the `setup
257257
```diff
258258
createInertiaApp({
259259
// ...
260-
\- setup({ app, props }) {
261-
\+ setup({ App, props }) {
260+
- setup({ app, props }) {
261+
+ setup({ App, props }) {
262262
// ...
263263
},
264264
})
@@ -272,6 +272,6 @@ If you're using the `usePage()` hook, remove all instances of `.value`.
272272

273273
```diff
274274
import { computed } from 'vue'
275-
\- const appName = computed(() => usePage().props.value.appName)
276-
\+ const appName = computed(() => usePage().props.appName)
275+
- const appName = computed(() => usePage().props.value.appName)
276+
+ const appName = computed(() => usePage().props.appName)
277277
```

‎v1/the-basics/pages.mdx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,9 @@ export default function Welcome({ user }) {
9393

9494
</CodeGroup>
9595

96+
<ClientSpecific>
9697
Given the page above, you can render the page by returning an [Inertia response](/v1/the-basics/responses) from a controller or route. In this example, let's assume this page is stored at <VueSpecific>`resources/js/Pages/User/Show.vue`</VueSpecific><ReactSpecific>`resources/js/Pages/User/Show.jsx`</ReactSpecific><SvelteSpecific>`resources/js/Pages/User/Show.svelte`</SvelteSpecific>within a Laravel application.
98+
</ClientSpecific>
9799

98100
```php
99101
use Inertia\Inertia;
@@ -195,7 +197,9 @@ export default function Layout({ children }) {
195197

196198
</CodeGroup>
197199

200+
<ClientSpecific>
198201
As you can see, there is nothing Inertia specific within this template. This is just a typical <VueSpecific>Vue</VueSpecific><ReactSpecific>React</ReactSpecific><SvelteSpecific>Svelte</SvelteSpecific> component.
202+
</ClientSpecific>
199203

200204
## Persistent Layouts
201205

0 commit comments

Comments
 (0)