wip

Author: joetannenbaum

snippets/vue2-specific.jsx

@@ -0,0 +1,29 @@
+import { useCallback, useEffect, useState } from "react";
+
+export const Vue2Specific = ({ children }) => {
+    const [code, setCode] = useState(
+        localStorage.getItem("code").replace(/"/g, "") || null,
+    );
+
+    const callback = useCallback((event) => {
+        if (event.detail.key === "code") {
+            setCode(event.detail.value.replace(/"/g, ""));
+        }
+    }, []);
+
+    useEffect(() => {
+        window.addEventListener("storage", callback);
+        window.addEventListener("localStorageUpdate", callback);
+
+        return () => {
+            window.removeEventListener("storage", callback);
+            window.removeEventListener("localStorageUpdate", callback);
+        };
+    });
+
+    if (code !== "Vue 2") {
+        return null;
+    }
+
+    return children;
+};

snippets/vue3-specific.jsx

@@ -0,0 +1,29 @@
+import { useCallback, useEffect, useState } from "react";
+
+export const Vue3Specific = ({ children }) => {
+    const [code, setCode] = useState(
+        localStorage.getItem("code").replace(/"/g, "") || null,
+    );
+
+    const callback = useCallback((event) => {
+        if (event.detail.key === "code") {
+            setCode(event.detail.value.replace(/"/g, ""));
+        }
+    }, []);
+
+    useEffect(() => {
+        window.addEventListener("storage", callback);
+        window.addEventListener("localStorageUpdate", callback);
+
+        return () => {
+            window.removeEventListener("storage", callback);
+            window.removeEventListener("localStorageUpdate", callback);
+        };
+    });
+
+    if (code !== "Vue 3") {
+        return null;
+    }
+
+    return children;
+};

v1/advanced/server-side-rendering.mdx

@@ -6,6 +6,8 @@ import { ClientSpecific } from "/snippets/client-specific.jsx"
 import { ReactSpecific } from "/snippets/react-specific.jsx"
 import { SvelteSpecific } from "/snippets/svelte-specific.jsx"
 import { VueSpecific } from "/snippets/vue-specific.jsx"
+import { Vue2Specific } from "/snippets/vue2-specific.jsx"
+import { Vue3Specific } from "/snippets/vue3-specific.jsx"
 
 <Warning>This is documentation for Inertia.js v1, which is no longer actively maintained. Please refer to the [v2 docs](/v2) for the latest information.</Warning>
 
@@ -154,14 +156,14 @@ Next, we need to update our Vite configuration to build our new `ssr.js` file. W
 
 ```diff
 export default defineConfig({
-plugins: [
-laravel({
-input: ['resources/css/app.css', 'resources/js/app.js'],
-+     ssr: 'resources/js/ssr.js',
-refresh: true,
-}),
-// ...
-],
+    plugins: [
+        laravel({
+            input: ['resources/css/app.css', 'resources/js/app.js'],
++           ssr: 'resources/js/ssr.js',
+            refresh: true,
+        }),
+        // ...
+    ],
 })
 ```
 
@@ -171,7 +173,7 @@ Next, let's update the `build` script in our `package.json` file to also build o
 
 ```diff
 "scripts": {
-"dev": "vite",
+    "dev": "vite",
 -   "build": "vite build"
 +   "build": "vite build && vite build --ssr"
 },
@@ -195,13 +197,17 @@ With the server running, you should be able to access your app within the browse
 
 ## Client Side Hydration
 
+<ClientSpecific>
 Since your website is now being server-side rendered, you can instruct <VueSpecific>Vue</VueSpecific><ReactSpecific>React</ReactSpecific><SvelteSpecific>Svelte</SvelteSpecific> to "hydrate" the static markup and make it interactive instead of re-rendering all the HTML that we just generated.
+</ClientSpecific>
 
-{/* <vue2>Inertia automatically enables client-side hydration in Vue 2 apps, so no changes are required. */}
+<Vue2Specific>Inertia automatically enables client-side hydration in Vue 2 apps, so no changes are required.</Vue2Specific>
 
-{/* </vue2><vue3>To enable client-side hydration in a Vue 3 app, update your `app.js` file to use `createSSRApp` instead of `createApp`: */}
+<Vue3Specific>To enable client-side hydration in a Vue 3 app, update your `app.js` file to use `createSSRApp` instead of `createApp`:</Vue3Specific>
 
-{/* </vue3><ReactSpecific>To enable client-side hydration in a React app, update your `app.js` file to use `hydrateRoot` instead of `createRoot`:</ReactSpecific><SvelteSpecific>To enable client-side hydration in a Svelte app, set the `hydratable` compiler option to `true` in your `vite.config.js` file:</SvelteSpecific> */}
+<ReactSpecific>To enable client-side hydration in a React app, update your `app.js` file to use `hydrateRoot` instead of `createRoot`:</ReactSpecific>
+
+<SvelteSpecific>To enable client-side hydration in a Svelte app, set the `hydratable` compiler option to `true` in your `vite.config.js` file:</SvelteSpecific>
 
 <CodeGroup>
 
@@ -269,7 +275,9 @@ Since your website is now being server-side rendered, you can instruct <VueSpeci
 
 </CodeGroup>
 
-{/* <SvelteSpecific>You'll also need to enable hydration in your `app.js` file: */}
+<SvelteSpecific>
+
+You'll also need to enable hydration in your `app.js` file:
 
 ```diff
    import { createInertiaApp } from '@inertiajs/svelte'
@@ -286,9 +294,13 @@ Since your website is now being server-side rendered, you can instruct <VueSpeci
 +     new App({ target: el, hydrate: true })
 +   },
    })
-```</SvelteSpecific>## Deployment
+```
+
+</SvelteSpecific>
+
+## Deployment
 
-When deploying your SSR enabled app to production, you'll need to build both the client-side ( `app.js`) and server-side bundles (`ssr.js`), and then run the SSR server as a background process, typically using a process monitoring tool such as Supervisor.
+When deploying your SSR enabled app to production, you'll need to build both the client-side (`app.js`) and server-side bundles (`ssr.js`), and then run the SSR server as a background process, typically using a process monitoring tool such as Supervisor.
 
 ```bash
 php artisan inertia:start-ssr

v1/getting-started/upgrade-guide.mdx

@@ -16,7 +16,7 @@ For a complete list of all the changes, see the [release notes](https://github.c
 
 ## New Dependencies
 
-To use previous Inertia releases, you had to install a number of libraries, including the core library ( `@inertiajs/inertia`), the adapter of your choice ( `@inertiajs/inertia-vue|vue3|react|svelte`), the progress library (`@inertiajs/progress`), and if you were using server-side rendering, the server library (`@inertiajs/server`).
+To use previous Inertia releases, you had to install a number of libraries, including the core library (`@inertiajs/inertia`), the adapter of your choice (`@inertiajs/inertia-vue|vue3|react|svelte`), the progress library (`@inertiajs/progress`), and if you were using server-side rendering, the server library (`@inertiajs/server`).
 
 **Moving forward you are now only required to install a single library** — the adapter of your choice (Vue, React, or Svelte), and all other core libraries are automatically installed for you.
 

v1/the-basics/pages.mdx

@@ -113,7 +113,7 @@ class UserController extends Controller
 
 ## Creating Layouts
 
-{/* While not required, for most projects it makes sense to create a site layout that all of your pages can extend. You may have noticed in our page example above that we're wrapping the page content within a `{`<layout>`}</layout>` component. Here's an example of such a component: */}
+While not required, for most projects it makes sense to create a site layout that all of your pages can extend. You may have noticed in our page example above that we're wrapping the page content within a `<Layout>` component. Here's an example of such a component:
 
 <CodeGroup>
 
@@ -388,14 +388,18 @@ export default Home
 
 </CodeGroup>
 
-{/* <VueSpecific>If you're using Vue 2.7 or Vue 3, you can alternatively use the [defineOptions plugin](https://vue-macros.sxzz.moe/macros/define-options.html) to define a layout within `<script setup>`: */}
+<VueSpecific>
+If you're using Vue 2.7 or Vue 3, you can alternatively use the [defineOptions plugin](https://vue-macros.sxzz.moe/macros/define-options.html) to define a layout within `<script setup>`:
 
-{/* ```html
+```html
 <script setup>
 import Layout from './Layout'
 defineOptions({ layout: Layout })
 </script>
-```</VueSpecific>## Default layouts */}
+```
+</VueSpecific>
+
+## Default layouts
 
 If you're using persistent layouts, you may find it convenient to define the default page layout in the `resolve()` callback of your application's main JavaScript file.
 

v1/the-basics/responses.mdx

@@ -8,7 +8,7 @@ title: Responses
 
 Creating an Inertia response is simple. To get started, invoke the `Inertia::render()` method within your controller or route, providing both the name of the [JavaScript page component](/v1/the-basics/pages) that you wish to render, as well as any props (data) for the page.
 
-In the example below, we will pass a single prop (`event`) which contains four attributes ( `id`, `title`, `start_date` and `description`) to the `Event/Show` page component.
+In the example below, we will pass a single prop (`event`) which contains four attributes (`id`, `title`, `start_date` and `description`) to the `Event/Show` page component.
 
 ```php
 use Inertia\Inertia;

v2/advanced/server-side-rendering.mdx

@@ -367,7 +367,7 @@ You will also need to set the `hydratable` compiler option to `true` in your `vi
 
 ## Deployment
 
-When deploying your SSR enabled app to production, you'll need to build both the client-side ( `app.js`) and server-side bundles (`ssr.js`), and then run the SSR server as a background process, typically using a process monitoring tool such as Supervisor.
+When deploying your SSR enabled app to production, you'll need to build both the client-side (`app.js`) and server-side bundles (`ssr.js`), and then run the SSR server as a background process, typically using a process monitoring tool such as Supervisor.
 
 ```bash
 php artisan inertia:start-ssr

v2/the-basics/responses.mdx

@@ -6,7 +6,7 @@ title: Responses
 
 Creating an Inertia response is simple. To get started, invoke the `Inertia::render()` method within your controller or route, providing both the name of the [JavaScript page component](/v2/the-basics/pages) that you wish to render, as well as any properties (data) for the page.
 
-In the example below, we will pass a single property (`event`) which contains four attributes ( `id`, `title`, `start_date` and `description`) to the `Event/Show` page component.
+In the example below, we will pass a single property (`event`) which contains four attributes (`id`, `title`, `start_date` and `description`) to the `Event/Show` page component.
 
 ```php
 use Inertia\Inertia;
@@ -83,7 +83,7 @@ Arrayable objects like Eloquent models and collections are automatically convert
 
 When passing props to your components, you may want to create custom classes that can transform themselves into the appropriate data format. While Laravel's `Arrayable` interface simply converts objects to arrays, Inertia offers the more powerful `ProvidesInertiaProperty` interface for context-aware transformations.
 
-This interface requires a `toInertiaProperty` method that receives a `PropertyContext`object containing the property key (`$context->key`), all props for the page ( `$context->props`), and the request instance (`$context->request`).
+This interface requires a `toInertiaProperty` method that receives a `PropertyContext`object containing the property key (`$context->key`), all props for the page (`$context->props`), and the request instance (`$context->request`).
 
 ```php
 use Inertia\PropertyContext;
@@ -151,7 +151,7 @@ return Inertia::render('Dashboard', [
 
 In some situations you may want to group related props together for reusability across different pages. You can accomplish this by implementing the `ProvidesInertiaProperties` interface.
 
-This interface requires a `toInertiaProperties` method that returns an array of key-value pairs. The method receives a `RenderContext` object containing the component name ( `$context->component`) and request instance (`$context->request`).
+This interface requires a `toInertiaProperties` method that returns an array of key-value pairs. The method receives a `RenderContext` object containing the component name (`$context->component`) and request instance (`$context->request`).
 
 ```php
 use App\Models\User;