diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
new file mode 100644
index 0000000..8f817ec
--- /dev/null
+++ b/.github/workflows/docs.yml
@@ -0,0 +1,22 @@
+name: Docs
+
+on:
+  push:
+    branches:
+      - main
+
+  pull_request:
+    paths:
+      - 'docs/**'
+
+jobs:
+  check_formatting:
+    runs-on: ubuntu-latest
+    name: Docs formatting
+    working-directory: ./docs
+    steps:
+      - uses: actions/checkout@v3
+      - name: Install dependencies
+        run: npm install
+      - name: Check formatting
+        run: npm run format:check
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 4a6a9a9..235e4c0 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -6,6 +6,8 @@ on:
       - main
 
   pull_request:
+    paths-ignore:
+      - 'docs/**'
 
 jobs:
   lint:
diff --git a/docs/.prettierignore b/docs/.prettierignore
new file mode 100644
index 0000000..7137f7a
--- /dev/null
+++ b/docs/.prettierignore
@@ -0,0 +1,3 @@
+**/node_modules
+**/dist
+**/cache
diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
index c41a6fb..019a431 100644
--- a/docs/.vitepress/config.mts
+++ b/docs/.vitepress/config.mts
@@ -1,10 +1,10 @@
-import { defineConfig } from "vitepress";
-import { tabsMarkdownPlugin } from "./vitepress-plugin-tabs/tabsMarkdownPlugin";
+import { defineConfig } from 'vitepress'
+import { tabsMarkdownPlugin } from './vitepress-plugin-tabs/tabsMarkdownPlugin'
 
-const title = "Inertia Rails";
-const description = "Community documentation for Inertia.js Rails adapter";
-const site = "https://inertia-rails.netlify.app";
-const image = `${site}/og_image.jpg`;
+const title = 'Inertia Rails'
+const description = 'Community documentation for Inertia.js Rails adapter'
+const site = 'https://inertia-rails.netlify.app'
+const image = `${site}/og_image.jpg`
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
@@ -13,47 +13,47 @@ export default defineConfig({
 
   markdown: {
     config(md) {
-      md.use(tabsMarkdownPlugin);
+      md.use(tabsMarkdownPlugin)
     },
   },
 
   head: [
-    ["link", { rel: "icon", href: "/favicon.ico", sizes: "32x32" }],
-    ["link", { rel: "icon", href: "/icon.svg", type: "image/svg+xml" }],
+    ['link', { rel: 'icon', href: '/favicon.ico', sizes: '32x32' }],
+    ['link', { rel: 'icon', href: '/icon.svg', type: 'image/svg+xml' }],
 
-    ["meta", { name: "twitter:card", content: "summary_large_image" }],
-    ["meta", { name: "twitter:site", content: site }],
-    ["meta", { name: "twitter:description", value: description }],
-    ["meta", { name: "twitter:image", content: image }],
+    ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
+    ['meta', { name: 'twitter:site', content: site }],
+    ['meta', { name: 'twitter:description', value: description }],
+    ['meta', { name: 'twitter:image', content: image }],
 
-    ["meta", { property: "og:type", content: "website" }],
-    ["meta", { property: "og:locale", content: "en_US" }],
-    ["meta", { property: "og:site", content: site }],
-    ["meta", { property: "og:site_name", content: title }],
-    ["meta", { property: "og:image", content: image }],
-    ["meta", { property: "og:description", content: description }],
+    ['meta', { property: 'og:type', content: 'website' }],
+    ['meta', { property: 'og:locale', content: 'en_US' }],
+    ['meta', { property: 'og:site', content: site }],
+    ['meta', { property: 'og:site_name', content: title }],
+    ['meta', { property: 'og:image', content: image }],
+    ['meta', { property: 'og:description', content: description }],
   ],
 
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
     nav: [
-      { text: "Home", link: "/" },
-      { text: "Guide", link: "/guide" },
-      { text: "Cookbook", link: "/cookbook/integrating-shadcn-ui" },
+      { text: 'Home', link: '/' },
+      { text: 'Guide', link: '/guide' },
+      { text: 'Cookbook', link: '/cookbook/integrating-shadcn-ui' },
       {
-        text: "Links",
+        text: 'Links',
         items: [
-          { text: "Official Inertia.js docs", link: "https://inertiajs.com" },
+          { text: 'Official Inertia.js docs', link: 'https://inertiajs.com' },
           {
-            text: "Gems",
+            text: 'Gems',
             items: [
               {
-                text: "inertia_rails",
-                link: "https://github.com/inertiajs/inertia-rails",
+                text: 'inertia_rails',
+                link: 'https://github.com/inertiajs/inertia-rails',
               },
               {
-                text: "inertia_rails-contrib",
-                link: "https://github.com/skryukov/inertia_rails-contrib",
+                text: 'inertia_rails-contrib',
+                link: 'https://github.com/skryukov/inertia_rails-contrib',
               },
             ],
           },
@@ -61,90 +61,93 @@ export default defineConfig({
       },
     ],
 
-    logo: "/logo.svg",
+    logo: '/logo.svg',
 
     sidebar: {
-      "/guide": [
+      '/guide': [
         {
           items: [
-            {text: "Introduction", link: "/guide"},
-            {text: "Demo app", link: "/guide/demo-application"},
-            {text: "Upgrade guide", link: "/guide/upgrade-guide"},
+            { text: 'Introduction', link: '/guide' },
+            { text: 'Demo app', link: '/guide/demo-application' },
+            { text: 'Upgrade guide', link: '/guide/upgrade-guide' },
           ],
         },
         {
-          text: "Installation",
+          text: 'Installation',
           items: [
-            {text: "Server-side", link: "/guide/server-side-setup"},
-            {text: "Client-side", link: "/guide/client-side-setup"},
-          ]
+            { text: 'Server-side', link: '/guide/server-side-setup' },
+            { text: 'Client-side', link: '/guide/client-side-setup' },
+          ],
         },
         {
-          text: "Core concepts",
+          text: 'Core concepts',
           items: [
-            {text: "Who is it for", link: "/guide/who-is-it-for"},
-            {text: "How it works", link: "/guide/how-it-works"},
-            {text: "The protocol", link: "/guide/the-protocol"},
-          ]
+            { text: 'Who is it for', link: '/guide/who-is-it-for' },
+            { text: 'How it works', link: '/guide/how-it-works' },
+            { text: 'The protocol', link: '/guide/the-protocol' },
+          ],
         },
         {
-          text: "The basics",
+          text: 'The basics',
           items: [
-            {text: "Pages", link: "/guide/pages"},
-            {text: "Responses", link: "/guide/responses"},
-            {text: "Redirects", link: "/guide/redirects"},
-            {text: "Routing", link: "/guide/routing"},
-            {text: "Title & meta", link: "/guide/title-and-meta"},
-            {text: "Links", link: "/guide/links"},
-            {text: "Manual visits", link: "/guide/manual-visits"},
-            {text: "Forms", link: "/guide/forms"},
-            {text: "File uploads", link: "/guide/file-uploads"},
-            {text: "Validation", link: "/guide/validation"},
-          ]
+            { text: 'Pages', link: '/guide/pages' },
+            { text: 'Responses', link: '/guide/responses' },
+            { text: 'Redirects', link: '/guide/redirects' },
+            { text: 'Routing', link: '/guide/routing' },
+            { text: 'Title & meta', link: '/guide/title-and-meta' },
+            { text: 'Links', link: '/guide/links' },
+            { text: 'Manual visits', link: '/guide/manual-visits' },
+            { text: 'Forms', link: '/guide/forms' },
+            { text: 'File uploads', link: '/guide/file-uploads' },
+            { text: 'Validation', link: '/guide/validation' },
+          ],
         },
         {
-          text: "Data & Props",
+          text: 'Data & Props',
           items: [
-            {text: "Shared data", link: "/guide/shared-data"},
-            {text: "Partial reloads", link: "/guide/partial-reloads"},
-            {text: "Deferred props", link: "/guide/deferred-props"},
-            {text: "Polling", link: "/guide/polling"},
-            {text: "Prefetching", link: "/guide/prefetching"},
-            {text: "Load when visible", link: "/guide/load-when-visible"},
-            {text: "Merging props", link: "/guide/merging-props"},
-            {text: "Remembering state", link: "/guide/remembering-state"},
-          ]
+            { text: 'Shared data', link: '/guide/shared-data' },
+            { text: 'Partial reloads', link: '/guide/partial-reloads' },
+            { text: 'Deferred props', link: '/guide/deferred-props' },
+            { text: 'Polling', link: '/guide/polling' },
+            { text: 'Prefetching', link: '/guide/prefetching' },
+            { text: 'Load when visible', link: '/guide/load-when-visible' },
+            { text: 'Merging props', link: '/guide/merging-props' },
+            { text: 'Remembering state', link: '/guide/remembering-state' },
+          ],
         },
         {
-          text: "Security",
+          text: 'Security',
           items: [
-            {text: "Authentication", link: "/guide/authentication"},
-            {text: "Authorization", link: "/guide/authorization"},
-            {text: "CSRF protection", link: "/guide/csrf-protection"},
-            {text: "History encryption", link: "/guide/history-encryption"},
-          ]
+            { text: 'Authentication', link: '/guide/authentication' },
+            { text: 'Authorization', link: '/guide/authorization' },
+            { text: 'CSRF protection', link: '/guide/csrf-protection' },
+            { text: 'History encryption', link: '/guide/history-encryption' },
+          ],
         },
         {
-          text: "Advanced",
+          text: 'Advanced',
           items: [
-            {text: "Asset versioning", link: "/guide/asset-versioning"},
-            {text: "Code splitting", link: "/guide/code-splitting"},
-            {text: "Error handling", link: "/guide/error-handling"},
-            {text: "Events", link: "/guide/events"},
-            {text: "Progress indicators", link: "/guide/progress-indicators"},
-            {text: "Scroll management", link: "/guide/scroll-management"},
-            {text: "Server-side rendering", link: "/guide/server-side-rendering"},
-            {text: "Testing", link: "/guide/testing"},
-          ]
+            { text: 'Asset versioning', link: '/guide/asset-versioning' },
+            { text: 'Code splitting', link: '/guide/code-splitting' },
+            { text: 'Error handling', link: '/guide/error-handling' },
+            { text: 'Events', link: '/guide/events' },
+            { text: 'Progress indicators', link: '/guide/progress-indicators' },
+            { text: 'Scroll management', link: '/guide/scroll-management' },
+            {
+              text: 'Server-side rendering',
+              link: '/guide/server-side-rendering',
+            },
+            { text: 'Testing', link: '/guide/testing' },
+          ],
         },
       ],
-      "/cookbook": [
+      '/cookbook': [
         {
           items: [
             {
-              text: "Integrations",
+              text: 'Integrations',
               items: [
-                { text: "shadcn/ui", link: "/cookbook/integrating-shadcn-ui" },
+                { text: 'shadcn/ui', link: '/cookbook/integrating-shadcn-ui' },
               ],
             },
           ],
@@ -153,24 +156,24 @@ export default defineConfig({
     },
 
     search: {
-      provider: "algolia",
+      provider: 'algolia',
       options: {
-        appId: "NFLARHZ4Q4",
-        apiKey: "5e79b6038b027b5bb342ea5a31d0a2e8",
-        indexName: "inertia-rails",
+        appId: 'NFLARHZ4Q4',
+        apiKey: '5e79b6038b027b5bb342ea5a31d0a2e8',
+        indexName: 'inertia-rails',
       },
     },
 
     editLink: {
       pattern:
-        "https://github.com/skryukov/inertia_rails-contrib/edit/main/docs/:path",
-      text: "Edit this page on GitHub",
+        'https://github.com/skryukov/inertia_rails-contrib/edit/main/docs/:path',
+      text: 'Edit this page on GitHub',
     },
 
     socialLinks: [
-      { icon: "github", link: "https://github.com/inertiajs/inertia-rails" },
-      { icon: "x", link: "https://x.com/inertiajs" },
-      { icon: "discord", link: "https://discord.gg/inertiajs" },
+      { icon: 'github', link: 'https://github.com/inertiajs/inertia-rails' },
+      { icon: 'x', link: 'https://x.com/inertiajs' },
+      { icon: 'discord', link: 'https://discord.gg/inertiajs' },
     ],
   },
-});
+})
diff --git a/docs/.vitepress/theme/frameworksTabs.ts b/docs/.vitepress/theme/frameworksTabs.ts
index 4868801..626883d 100644
--- a/docs/.vitepress/theme/frameworksTabs.ts
+++ b/docs/.vitepress/theme/frameworksTabs.ts
@@ -1,24 +1,24 @@
-const localStorageKey = "vitepress:tabsSharedState";
-const ls = typeof localStorage !== "undefined" ? localStorage : null;
+const localStorageKey = 'vitepress:tabsSharedState'
+const ls = typeof localStorage !== 'undefined' ? localStorage : null
 
 const getLocalStorageValue = (): Record<string, string> => {
-  const rawValue = ls?.getItem(localStorageKey);
+  const rawValue = ls?.getItem(localStorageKey)
   if (rawValue) {
     try {
-      return JSON.parse(rawValue);
+      return JSON.parse(rawValue)
     } catch {}
   }
-  return {};
-};
+  return {}
+}
 
 const setLocalStorageValue = (v: Record<string, string>) => {
-  if (!ls) return;
-  ls.setItem(localStorageKey, JSON.stringify(v));
-};
+  if (!ls) return
+  ls.setItem(localStorageKey, JSON.stringify(v))
+}
 
 export const setupFrameworksTabs = () => {
-  const v = getLocalStorageValue();
+  const v = getLocalStorageValue()
   if (!v.frameworks) {
-    setLocalStorageValue({ frameworks: "React" });
+    setLocalStorageValue({ frameworks: 'React' })
   }
-};
+}
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index b21c9a1..fc1acce 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -1,22 +1,22 @@
 // https://vitepress.dev/guide/custom-theme
-import { h } from "vue";
-import type { Theme } from "vitepress";
-import DefaultTheme from "vitepress/theme";
-import { enhanceAppWithTabs } from "vitepress-plugin-tabs/client";
-import { setupFrameworksTabs } from "./frameworksTabs";
-import "./style.css";
+import type { Theme } from 'vitepress'
+import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client'
+import DefaultTheme from 'vitepress/theme'
+import { h } from 'vue'
+import { setupFrameworksTabs } from './frameworksTabs'
+import './style.css'
 
 export default {
   extends: DefaultTheme,
   Layout: () => {
     return h(DefaultTheme.Layout, null, {
       // https://vitepress.dev/guide/extending-default-theme#layout-slots
-    });
+    })
   },
   enhanceApp({ app, router, siteData }) {
-    enhanceAppWithTabs(app);
+    enhanceAppWithTabs(app)
   },
   setup() {
-    setupFrameworksTabs();
+    setupFrameworksTabs()
   },
-} satisfies Theme;
+} satisfies Theme
diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
index 83bf35e..400f66d 100644
--- a/docs/.vitepress/theme/style.css
+++ b/docs/.vitepress/theme/style.css
@@ -153,11 +153,11 @@
   padding: 0 !important;
 }
 
-.plugin-tabs--content div[class*="language-"] {
+.plugin-tabs--content div[class*='language-'] {
   background-color: var(--vp-code-block-bg) !important;
 }
 
-.plugin-tabs--content div[class*="language-"]:first-child {
+.plugin-tabs--content div[class*='language-']:first-child {
   border-top-left-radius: 0 !important;
   border-top-right-radius: 0 !important;
 }
diff --git a/docs/.vitepress/vitepress-plugin-tabs/ruleBlockTab.ts b/docs/.vitepress/vitepress-plugin-tabs/ruleBlockTab.ts
index 7968694..ea1b618 100644
--- a/docs/.vitepress/vitepress-plugin-tabs/ruleBlockTab.ts
+++ b/docs/.vitepress/vitepress-plugin-tabs/ruleBlockTab.ts
@@ -77,19 +77,23 @@ export const ruleBlockTab: RuleBlock = (state, startLine, endLine, silent) => {
   // this will prevent lazy continuations from ever going past our end marker
   state.lineMax = nextLine
 
-  state.src.slice(pos, max).trimStart().split('|').forEach((label) => {
-    const startToken = state.push('tab_open', 'div', 1)
-    startToken.markup = state.src.slice(mem, pos)
-    startToken.block = true
-    startToken.info = label
-    startToken.map = [startLine, nextLine - 1]
-
-    state.md.block.tokenize(state, startLine + 1, nextLine)
-
-    const endToken = state.push('tab_close', 'div', -1)
-    endToken.markup = state.src.slice(endStart, endPos)
-    endToken.block = true
-  })
+  state.src
+    .slice(pos, max)
+    .trimStart()
+    .split('|')
+    .forEach((label) => {
+      const startToken = state.push('tab_open', 'div', 1)
+      startToken.markup = state.src.slice(mem, pos)
+      startToken.block = true
+      startToken.info = label
+      startToken.map = [startLine, nextLine - 1]
+
+      state.md.block.tokenize(state, startLine + 1, nextLine)
+
+      const endToken = state.push('tab_close', 'div', -1)
+      endToken.markup = state.src.slice(endStart, endPos)
+      endToken.block = true
+    })
 
   state.parentType = oldParent
   state.lineMax = oldLineMax
diff --git a/docs/.vitepress/vitepress-plugin-tabs/tabsMarkdownPlugin.ts b/docs/.vitepress/vitepress-plugin-tabs/tabsMarkdownPlugin.ts
index 7a81079..d372397 100644
--- a/docs/.vitepress/vitepress-plugin-tabs/tabsMarkdownPlugin.ts
+++ b/docs/.vitepress/vitepress-plugin-tabs/tabsMarkdownPlugin.ts
@@ -1,8 +1,8 @@
 import type MarkdownIt from 'markdown-it'
 import container from 'markdown-it-container'
+import type Renderer from 'markdown-it/lib/renderer'
 import type Token from 'markdown-it/lib/token'
 import { ruleBlockTab } from './ruleBlockTab'
-import type Renderer from 'markdown-it/lib/renderer'
 
 type Params = {
   shareStateKey: string | undefined
@@ -11,7 +11,7 @@ type Params = {
 const parseTabsParams = (input: string): Params => {
   const match = input.match(/key:(\S+)/)
   return {
-    shareStateKey: match?.[1]
+    shareStateKey: match?.[1],
   }
 }
 
@@ -28,7 +28,7 @@ export const tabsMarkdownPlugin = (md: MarkdownIt) => {
       } else {
         return `</PluginTabs>\n`
       }
-    }
+    },
   })
 
   md.block.ruler.after('container_tabs', 'tab', ruleBlockTab)
diff --git a/docs/cookbook/integrating-shadcn-ui.md b/docs/cookbook/integrating-shadcn-ui.md
index f80de12..79664bd 100644
--- a/docs/cookbook/integrating-shadcn-ui.md
+++ b/docs/cookbook/integrating-shadcn-ui.md
@@ -42,40 +42,35 @@ Installing Inertia's Rails adapter
 
 Let's configure our project to work seamlessly with `shadcn/ui`. Choose your path based on whether you're using TypeScript or JavaScript.
 
-
 :::tabs key:languages
 
 == TypeScript
 
 You'll need to configure two files. First, update your `tsconfig.app.json`:
 
-```json5
+```json lines
 {
   "compilerOptions": {
     // ...
     "baseUrl": ".",
     "paths": {
-      "@/*": [
-        "./app/frontend/*"
-      ]
+      "@/*": ["./app/frontend/*"]
     }
-  },
+  }
   // ...
 }
 ```
 
 Then, set up your `tsconfig.json` to match `shadcn/ui`'s requirements (note the `baseUrl` and `paths` properties are different from the `tsconfig.app.json`):
 
-```json5
+```json lines
 {
   //...
   "compilerOptions": {
     /* Required for shadcn-ui/ui */
     "baseUrl": "./app/frontend",
     "paths": {
-      "@/*": [
-        "./*"
-      ]
+      "@/*": ["./*"]
     }
   }
 }
diff --git a/docs/guide/client-side-setup.md b/docs/guide/client-side-setup.md
index c42425b..9516f2b 100644
--- a/docs/guide/client-side-setup.md
+++ b/docs/guide/client-side-setup.md
@@ -100,7 +100,7 @@ import { createInertiaApp } from '@inertiajs/svelte'
 import { mount } from 'svelte'
 
 createInertiaApp({
-  resolve: name => {
+  resolve: (name) => {
     const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true })
     return pages[`./Pages/${name}.svelte`]
   },
@@ -109,6 +109,7 @@ createInertiaApp({
   },
 })
 ```
+
 :::
 
 The `setup` callback receives everything necessary to initialize the client-side framework, including the root Inertia `App` component.
@@ -124,7 +125,7 @@ The `resolve` callback tells Inertia how to load a page component. It receives a
 // Vite
 // frontend/entrypoints/inertia.js
 createInertiaApp({
-  resolve: name => {
+  resolve: (name) => {
     const pages = import.meta.glob('../pages/**/*.vue', { eager: true })
     return pages[`../pages/${name}.vue`]
   },
@@ -134,7 +135,7 @@ createInertiaApp({
 // Webpacker/Shakapacker
 // javascript/packs/inertia.js
 createInertiaApp({
-  resolve: name => require(`../pages/${name}`),
+  resolve: (name) => require(`../pages/${name}`),
   // ...
 })
 ```
@@ -145,8 +146,8 @@ createInertiaApp({
 // Vite
 // frontend/entrypoints/inertia.js
 createInertiaApp({
-  resolve: name => {
-    const pages = import.meta.glob('../pages/**/*.jsx', {eager: true})
+  resolve: (name) => {
+    const pages = import.meta.glob('../pages/**/*.jsx', { eager: true })
     return pages[`../pages/${name}.jsx`]
   },
   //...
@@ -155,7 +156,7 @@ createInertiaApp({
 // Webpacker/Shakapacker
 // javascript/packs/inertia.js
 createInertiaApp({
-  resolve: name => require(`../pages/${name}`),
+  resolve: (name) => require(`../pages/${name}`),
   //...
 })
 ```
@@ -166,8 +167,8 @@ createInertiaApp({
 // Vite
 // frontend/entrypoints/inertia.js
 createInertiaApp({
-  resolve: name => {
-    const pages = import.meta.glob('../pages/**/*.svelte', {eager: true})
+  resolve: (name) => {
+    const pages = import.meta.glob('../pages/**/*.svelte', { eager: true })
     return pages[`../pages/${name}.svelte`]
   },
   //...
@@ -176,7 +177,7 @@ createInertiaApp({
 // Webpacker/Shakapacker
 // javascript/packs/inertia.js
 createInertiaApp({
-  resolve: name => require(`../pages/${name}.svelte`),
+  resolve: (name) => require(`../pages/${name}.svelte`),
   //...
 })
 ```
diff --git a/docs/guide/code-splitting.md b/docs/guide/code-splitting.md
index b49d4f2..b62f32f 100644
--- a/docs/guide/code-splitting.md
+++ b/docs/guide/code-splitting.md
@@ -16,7 +16,7 @@ Vite enables code splitting (or lazy-loading as they call it) by default when us
 ```js
 // frontend/entrypoints/inertia.js
 createInertiaApp({
-  resolve: name => {
+  resolve: (name) => {
     const pages = import.meta.glob('../pages/**/*.vue', { eager: true }) // [!code --]
     return pages[`../pages/${name}.vue`] // [!code --]
     const pages = import.meta.glob('../pages/**/*.vue') // [!code ++]
@@ -31,7 +31,7 @@ createInertiaApp({
 ```js
 // frontend/entrypoints/inertia.js
 createInertiaApp({
-  resolve: name => {
+  resolve: (name) => {
     const pages = import.meta.glob('../pages/**/*.jsx', { eager: true }) // [!code --]
     return pages[`../pages/${name}.jsx`] // [!code --]
     const pages = import.meta.glob('../pages/**/*.jsx') // [!code ++]
@@ -46,7 +46,7 @@ createInertiaApp({
 ```js
 // frontend/entrypoints/inertia.js
 createInertiaApp({
-  resolve: name => {
+  resolve: (name) => {
     const pages = import.meta.glob('../pages/**/*.svelte', { eager: true }) // [!code --]
     return pages[`../pages/${name}.svelte`] // [!code --]
     const pages = import.meta.glob('../pages/**/*.svelte') // [!code ++]
@@ -85,8 +85,8 @@ Finally, update the `resolve` callback in your app's initialization code to use
 ```js
 // javascript/packs/inertia.js
 createInertiaApp({
-  resolve: name => require(`../pages/${name}`), // [!code ii]
-  resolve: name => import(`../pages/${name}`), // [!code ++]
+  resolve: (name) => require(`../pages/${name}`), // [!code ii]
+  resolve: (name) => import(`../pages/${name}`), // [!code ++]
   //...
 })
 ```
@@ -96,8 +96,8 @@ createInertiaApp({
 ```js
 // javascript/packs/inertia.js
 createInertiaApp({
-  resolve: name => require(`../pages/${name}`), // [!code ii]
-  resolve: name => import(`../pages/${name}`), // [!code ++]
+  resolve: (name) => require(`../pages/${name}`), // [!code ii]
+  resolve: (name) => import(`../pages/${name}`), // [!code ++]
   //...
 })
 ```
@@ -107,8 +107,8 @@ createInertiaApp({
 ```js
 // javascript/packs/inertia.js
 createInertiaApp({
-  resolve: name => require(`../pages/${name}.svelte`), // [!code ii]
-  resolve: name => import(`../pages/${name}.svelte`), // [!code ++]
+  resolve: (name) => require(`../pages/${name}.svelte`), // [!code ii]
+  resolve: (name) => import(`../pages/${name}.svelte`), // [!code ++]
   //...
 })
 ```
diff --git a/docs/guide/deferred-props.md b/docs/guide/deferred-props.md
index fe6c5e4..7918d79 100644
--- a/docs/guide/deferred-props.md
+++ b/docs/guide/deferred-props.md
@@ -191,4 +191,5 @@ export default () => (
   <!-- Props are now loaded -->
 </Deferred>
 ```
+
 :::
diff --git a/docs/guide/error-handling.md b/docs/guide/error-handling.md
index 40c2713..04faffc 100644
--- a/docs/guide/error-handling.md
+++ b/docs/guide/error-handling.md
@@ -104,12 +104,13 @@ export default function ErrorPage({ status }) {
 <script>
   export let status
 
-  $: title = {
-    503: 'Service Unavailable',
-    500: 'Server Error',
-    404: 'Page Not Found',
-    403: 'Forbidden',
-  }[status] || 'Unexpected error'
+  $: title =
+    {
+      503: 'Service Unavailable',
+      500: 'Server Error',
+      404: 'Page Not Found',
+      403: 'Forbidden',
+    }[status] || 'Unexpected error'
 
   $: description = {
     503: 'Sorry, we are doing some maintenance. Please check back soon.',
diff --git a/docs/guide/file-uploads.md b/docs/guide/file-uploads.md
index 7fb58d3..5046a48 100644
--- a/docs/guide/file-uploads.md
+++ b/docs/guide/file-uploads.md
@@ -99,10 +99,7 @@ return (
       value={data.name}
       onChange={(e) => setData('name', e.target.value)}
     />
-    <input
-      type="file"
-      onChange={(e) => setData('avatar', e.target.files[0])}
-    />
+    <input type="file" onChange={(e) => setData('avatar', e.target.files[0])} />
     {progress && (
       <progress value={progress.percentage} max="100">
         {progress.percentage}%
@@ -131,7 +128,7 @@ return (
 
 <form on:submit|preventDefault={submit}>
   <input type="text" bind:value={$form.name} />
-  <input type="file" on:input={e => $form.avatar = e.target.files[0]} />
+  <input type="file" on:input={(e) => ($form.avatar = e.target.files[0])} />
   {#if $form.progress}
     <progress value={$form.progress.percentage} max="100">
       {$form.progress.percentage}%
@@ -160,7 +157,7 @@ return (
 
 <form onsubmit={submit}>
   <input type="text" bind:value={$form.name} />
-  <input type="file" oninput={e => $form.avatar = e.target.files[0]} />
+  <input type="file" oninput={(e) => ($form.avatar = e.target.files[0])} />
   {#if $form.progress}
     <progress value={$form.progress.percentage} max="100">
       {$form.progress.percentage}%
diff --git a/docs/guide/forms.md b/docs/guide/forms.md
index 5938210..0c25f01 100644
--- a/docs/guide/forms.md
+++ b/docs/guide/forms.md
@@ -106,13 +106,13 @@ export default function Edit() {
 
 <form on:submit|preventDefault={submit}>
   <label for="first_name">First name:</label>
-  <input id="first_name" bind:value={values.first_name}>
+  <input id="first_name" bind:value={values.first_name} />
 
   <label for="last_name">Last name:</label>
-  <input id="last_name" bind:value={values.last_name}>
+  <input id="last_name" bind:value={values.last_name} />
 
   <label for="email">Email:</label>
-  <input id="email" bind:value={values.email}>
+  <input id="email" bind:value={values.email} />
 
   <button type="submit">Submit</button>
 </form>
@@ -138,13 +138,13 @@ export default function Edit() {
 
 <form onsubmit={submit}>
   <label for="first_name">First name:</label>
-  <input id="first_name" bind:value={values.first_name}>
+  <input id="first_name" bind:value={values.first_name} />
 
   <label for="last_name">Last name:</label>
-  <input id="last_name" bind:value={values.last_name}>
+  <input id="last_name" bind:value={values.last_name} />
 
   <label for="email">Email:</label>
-  <input id="email" bind:value={values.email}>
+  <input id="email" bind:value={values.email} />
 
   <button type="submit">Submit</button>
 </form>
@@ -765,7 +765,7 @@ To instruct Inertia to store a form's data and errors in [history state](/guide/
 :::tabs key:frameworks
 == Vue
 
-```vue
+```js
 import { useForm } from '@inertiajs/vue3'
 
 const form = useForm('CreateUser', data)
@@ -774,7 +774,7 @@ const form = useForm(`EditUser:${user.id}`, data)
 
 == React
 
-```jsx
+```js
 import { useForm } from '@inertiajs/react'
 
 const form = useForm('CreateUser', data)
@@ -783,7 +783,7 @@ const form = useForm(`EditUser:${user.id}`, data)
 
 == Svelte 4|Svelte 5
 
-```svelte
+```js
 import { useForm } from '@inertiajs/svelte'
 
 const form = useForm('CreateUser', data)
diff --git a/docs/guide/history-encryption.md b/docs/guide/history-encryption.md
index db15fa8..d2efe01 100644
--- a/docs/guide/history-encryption.md
+++ b/docs/guide/history-encryption.md
@@ -40,7 +40,7 @@ You can also enable history encryption for all actions in a controller by settin
 ```ruby
 class DashboardController < ApplicationController
   inertia_config(encrypt_history: true)
-  
+
   # ...
 end
 ```
diff --git a/docs/guide/links.md b/docs/guide/links.md
index 45a6a99..6c517f2 100644
--- a/docs/guide/links.md
+++ b/docs/guide/links.md
@@ -10,9 +10,13 @@ To create an Inertia link, use the Inertia `<Link>` component. Any attributes yo
 == Vue
 
 ```vue
+<script setup>
 import { Link } from '@inertiajs/vue3'
+</script>
 
-<Link href="/">Home</Link>
+<template>
+  <Link href="/">Home</Link>
+</template>
 ```
 
 == React
@@ -20,13 +24,15 @@ import { Link } from '@inertiajs/vue3'
 ```jsx
 import { Link } from '@inertiajs/react'
 
-<Link href="/">Home</Link>
+export default () => <Link href="/">Home</Link>
 ```
 
 == Svelte 4|Svelte 5
 
 ```svelte
-import { inertia, Link } from '@inertiajs/svelte'
+<script>
+  import { inertia, Link } from '@inertiajs/svelte'
+</script>
 
 <a href="/" use:inertia>Home</a>
 
@@ -44,12 +50,15 @@ By default, Inertia renders links as anchor `<a>` elements. However, you can cha
 == Vue
 
 ```vue
+<script setup>
 import { Link } from '@inertiajs/vue3'
+</script>
 
-<Link href="/logout" method="post" as="button">Logout</Link>
-
-// Renders as...
-// <button type="button">Logout</button>
+<template>
+  <Link href="/logout" method="post" as="button">Logout</Link>
+  <!-- Renders as... -->
+  <!--  <button type="button">Logout</button> -->
+</template>
 ```
 
 == React
@@ -58,7 +67,9 @@ import { Link } from '@inertiajs/vue3'
 import { Link } from '@inertiajs/react'
 
 export default () => (
-  <Link href="/logout" method="post" as="button">Logout</Link>
+  <Link href="/logout" method="post" as="button">
+    Logout
+  </Link>
 )
 
 // Renders as...
@@ -74,8 +85,8 @@ export default () => (
 
 <Link href="/logout" method="post" as="button">Logout</Link>
 
-// Renders as...
-// <button type="button">Logout</button>
+<!-- Renders as... -->
+<!-- <button type="button">Logout</button> -->
 ```
 
 :::
@@ -91,9 +102,13 @@ You can specify the HTTP request method for an Inertia link request using the `m
 == Vue
 
 ```vue
+<script setup>
 import { Link } from '@inertiajs/vue3'
+</script>
 
-<Link href="/logout" method="post" as="button">Logout</Link>
+<template>
+  <Link href="/logout" method="post" as="button">Logout</Link>
+</template>
 ```
 
 == React
@@ -101,15 +116,19 @@ import { Link } from '@inertiajs/vue3'
 ```jsx
 import { Link } from '@inertiajs/react'
 
-<Link href="/logout" method="post" as="button">
-  Logout
-</Link>
+export default () => (
+  <Link href="/logout" method="post" as="button">
+    Logout
+  </Link>
+)
 ```
 
 == Svelte 4|Svelte 5
 
 ```svelte
-import { inertia, Link } from '@inertiajs/svelte'
+<script>
+  import { inertia, Link } from '@inertiajs/svelte'
+</script>
 
 <button use:inertia={{ href: '/logout', method: 'post' }} type="button">Logout</button>
 
@@ -126,14 +145,15 @@ When making `POST` or `PUT` requests, you may wish to add additional data to the
 == Vue
 
 ```vue
+<script setup>
 import { Link } from '@inertiajs/vue3'
+</script>
 
-<Link
-  href="/endpoint"
-  method="post"
-  as="button"
-  :data="{ foo: bar }"
->Save</Link>
+<template>
+  <Link href="/endpoint" method="post" as="button" :data="{ foo: bar }">
+    Save
+  </Link>
+</template>
 ```
 
 == React
@@ -141,17 +161,26 @@ import { Link } from '@inertiajs/vue3'
 ```jsx
 import { Link } from '@inertiajs/react'
 
-<Link href="/endpoint" method="post" as="button" data={{ foo: bar }}>
-  Save
-</Link>
+export default () => (
+  <Link href="/endpoint" method="post" as="button" data={{ foo: bar }}>
+    Save
+  </Link>
+)
 ```
 
 == Svelte 4|Svelte 5
 
 ```svelte
-import { inertia, Link } from '@inertiajs/svelte'
+<script>
+  import { inertia, Link } from '@inertiajs/svelte'
+</script>
 
-<button use:inertia={{ href: '/endpoint', method: 'post', data: { foo: bar } }} type="button">Save</button>
+<button
+  use:inertia={{ href: '/endpoint', method: 'post', data: { foo: bar } }}
+  type="button"
+>
+  Save
+</button>
 
 <Link href="/endpoint" method="post" data={{ foo: bar }}>Save</Link>
 ```
@@ -166,9 +195,13 @@ The `headers` prop allows you to add custom headers to an Inertia link. However,
 == Vue
 
 ```vue
+<script setup>
 import { Link } from '@inertiajs/vue3'
+</script>
 
-<Link href="/endpoint" :headers="{ foo: bar }">Save</Link>
+<template>
+  <Link href="/endpoint" :headers="{ foo: bar }">Save</Link>
+</template>
 ```
 
 == React
@@ -176,15 +209,19 @@ import { Link } from '@inertiajs/vue3'
 ```jsx
 import { Link } from '@inertiajs/react'
 
-<Link href="/endpoint" headers={{ foo: bar }}>
-  Save
-</Link>
+export default () => (
+  <Link href="/endpoint" headers={{ foo: bar }}>
+    Save
+  </Link>
+)
 ```
 
 == Svelte 4|Svelte 5
 
 ```svelte
-import { inertia, Link } from '@inertiajs/svelte'
+<script>
+  import { inertia, Link } from '@inertiajs/svelte'
+</script>
 
 <button use:inertia={{ href: '/endpoint', headers: { foo: bar } }}>Save</button>
 
@@ -201,9 +238,13 @@ The `replace` prop allows you to specify the browser's history behavior. By defa
 == Vue
 
 ```vue
+<script setup>
 import { Link } from '@inertiajs/vue3'
+</script>
 
-<Link href="/" replace>Home</Link>
+<template>
+  <Link href="/" replace>Home</Link>
+</template>
 ```
 
 == React
@@ -211,15 +252,19 @@ import { Link } from '@inertiajs/vue3'
 ```jsx
 import { Link } from '@inertiajs/react'
 
-<Link href="/" replace>
-  Home
-</Link>
+export default () => (
+  <Link href="/" replace>
+    Home
+  </Link>
+)
 ```
 
 == Svelte 4|Svelte 5
 
 ```svelte
-import { inertia, Link } from '@inertiajs/svelte'
+<script>
+  import { inertia, Link } from '@inertiajs/svelte'
+</script>
 
 <a href="/" use:inertia={{ replace: true }}>Home</a>
 
@@ -236,11 +281,15 @@ You can preserve a page component's local state using the `preserveState` prop.
 == Vue
 
 ```vue
+<script setup>
 import { Link } from '@inertiajs/vue3'
+</script>
 
-<input v-model="query" type="text" />
+<template>
+  <input v-model="query" type="text" />
 
-<Link href="/search" :data="{ query }" preserve-state>Search</Link>
+  <Link href="/search" :data="{ query }" preserve-state>Search</Link>
+</template>
 ```
 
 == React
@@ -248,19 +297,29 @@ import { Link } from '@inertiajs/vue3'
 ```jsx
 import { Link } from '@inertiajs/react'
 
-<input onChange={this.handleChange} value={query} type="text" />
+export default () => (
+  <>
+    <input onChange={this.handleChange} value={query} type="text" />
 
-<Link href="/search" data={query} preserveState>Search</Link>
+    <Link href="/search" data={query} preserveState>
+      Search
+    </Link>
+  </>
+)
 ```
 
 == Svelte 4|Svelte 5
 
 ```svelte
-import { inertia, Link } from '@inertiajs/svelte'
+<script>
+  import { inertia, Link } from '@inertiajs/svelte'
+</script>
 
 <input bind:value={query} type="text" />
 
-<button use:inertia={{ href: '/search', data: { query }, preserveState: true }}>Search</button>
+<button use:inertia={{ href: '/search', data: { query }, preserveState: true }}>
+  Search
+</button>
 
 <Link href="/search" data={{ query }} preserveState>Search</Link>
 ```
@@ -275,9 +334,13 @@ You can use the `preserveScroll` prop to prevent Inertia from automatically rese
 == Vue
 
 ```vue
+<script setup>
 import { Link } from '@inertiajs/vue3'
+</script>
 
-<Link href="/" preserve-scroll>Home</Link>
+<template>
+  <Link href="/" preserve-scroll>Home</Link>
+</template>
 ```
 
 == React
@@ -285,15 +348,19 @@ import { Link } from '@inertiajs/vue3'
 ```jsx
 import { Link } from '@inertiajs/react'
 
-<Link href="/" preserveScroll>
-  Home
-</Link>
+export default () => (
+  <Link href="/" preserveScroll>
+    Home
+  </Link>
+)
 ```
 
 == Svelte 4|Svelte 5
 
 ```svelte
-import { inertia, Link } from '@inertiajs/svelte'
+<script>
+  import { inertia, Link } from '@inertiajs/svelte'
+</script>
 
 <a href="/" use:inertia={{ preserveScroll: true }}>Home</a>
 
@@ -312,9 +379,13 @@ The `only` prop allows you to specify that only a subset of a page's props (data
 == Vue
 
 ```vue
+<script setup>
 import { Link } from '@inertiajs/vue3'
+</script>
 
-<Link href="/users?active=true" :only="['users']">Show active</Link>
+<template>
+  <Link href="/users?active=true" :only="['users']">Show active</Link>
+</template>
 ```
 
 == React
@@ -322,15 +393,19 @@ import { Link } from '@inertiajs/vue3'
 ```jsx
 import { Link } from '@inertiajs/react'
 
-<Link href="/users?active=true" only={['users']}>
-  Show active
-</Link>
+export default () => (
+  <Link href="/users?active=true" only={['users']}>
+    Show active
+  </Link>
+)
 ```
 
 == Svelte 4|Svelte 5
 
 ```svelte
-import { inertia, Link } from '@inertiajs/svelte'
+<script>
+  import { inertia, Link } from '@inertiajs/svelte'
+</script>
 
 <a href="/users?active=true" use:inertia={{ only: ['users'] }}>Show active</a>
 
@@ -349,28 +424,29 @@ It's often desirable to set an active state for navigation links based on the cu
 == Vue
 
 ```vue
+<script setup>
 import { Link } from '@inertiajs/vue3'
+</script>
 
-// URL exact match...
-<Link href="/users" :class="{ active: $page.url === '/users' }">Users</Link>
-
-// Component exact match...
-<Link
-  href="/users"
-  :class="{ active: $page.component === 'Users/Index' }"
->Users</Link>
-
-// URL starts with (/users, /users/create, /users/1, etc.)...
-<Link
-  href="/users"
-  :class="{ active: $page.url.startsWith('/users') }"
->Users</Link>
-
-// Component starts with (Users/Index, Users/Create, Users/Show, etc.)...
-<Link
-  href="/users"
-  :class="{ active: $page.component.startsWith('Users') }"
->Users</Link>
+<template>
+  <!-- URL exact match...-->
+  <Link href="/users" :class="{ active: $page.url === '/users' }">Users</Link>
+
+  <!-- Component exact match...-->
+  <Link href="/users" :class="{ active: $page.component === 'Users/Index' }">
+    Users
+  </Link>
+
+  <!-- URL starts with (/users, /users/create, /users/1, etc.)...-->
+  <Link href="/users" :class="{ active: $page.url.startsWith('/users') }">
+    Users
+  </Link>
+
+  <!-- Component starts with (Users/Index, Users/Create, Users/Show, etc.)...-->
+  <Link href="/users" :class="{ active: $page.component.startsWith('Users') }">
+    Users
+  </Link>
+</template>
 ```
 
 == React
@@ -378,37 +454,67 @@ import { Link } from '@inertiajs/vue3'
 ```jsx
 import { usePage } from '@inertiajs/react'
 
-const { url, component } = usePage()
-
-// URL exact match...
-<Link href="/users" className={url === '/users' ? 'active' : ''}>Users</Link>
-
-// Component exact match...
-<Link href="/users" className={component === 'Users/Index' ? 'active' : ''}>Users</Link>
-
-// URL starts with (/users, /users/create, /users/1, etc.)...
-<Link href="/users" className={url.startsWith('/users') ? 'active' : ''}>Users</Link>
-
-// Component starts with (Users/Index, Users/Create, Users/Show, etc.)...
-<Link href="/users" className={component.startsWith('Users') ? 'active' : ''}>Users</Link>
+export default () => {
+  const { url, component } = usePage()
+
+  return (
+    <>
+      // URL exact match...
+      <Link href="/users" className={url === '/users' ? 'active' : ''}>
+        Users
+      </Link>
+      // Component exact match...
+      <Link
+        href="/users"
+        className={component === 'Users/Index' ? 'active' : ''}
+      >
+        Users
+      </Link>
+      // URL starts with (/users, /users/create, /users/1, etc.)...
+      <Link href="/users" className={url.startsWith('/users') ? 'active' : ''}>
+        Users
+      </Link>
+      // Component starts with (Users/Index, Users/Create, Users/Show, etc.)...
+      <Link
+        href="/users"
+        className={component.startsWith('Users') ? 'active' : ''}
+      >
+        Users
+      </Link>
+    </>
+  )
+}
 ```
 
 == Svelte 4|Svelte 5
 
 ```svelte
-import { inertia, Link, page } from '@inertiajs/svelte'
-
-// URL exact match...
-<a href="/users" use:inertia class:active={$page.url === '/users'}>Users</a>
-
-// Component exact match...
-<a href="/users" use:inertia class:active={$page.component === 'Users/Index'}>Users</a>
-
-// URL starts with (/users, /users/create, /users/1, etc.)...
-<Link href="/users" class={$page.url.startsWith('/users') ? 'active' : ''}>Users</Link>
+<script>
+  import { inertia, Link, page } from '@inertiajs/svelte'
+</script>
 
-// Component starts with (Users/Index, Users/Create, Users/Show, etc.)...
-<Link href="/users" class={$page.component.startsWith('Users') ? 'active' : ''}>Users</Link>
+<template>
+  <!-- URL exact match... -->
+  <a href="/users" use:inertia class:active={$page.url === '/users'}>Users</a>
+
+  <!-- Component exact match... -->
+  <a href="/users" use:inertia class:active={$page.component === 'Users/Index'}>
+    Users
+  </a>
+
+  <!-- URL starts with (/users, /users/create, /users/1, etc.)... -->
+  <Link href="/users" class={$page.url.startsWith('/users') ? 'active' : ''}>
+    Users
+  </Link>
+
+  <!-- Component starts with (Users/Index, Users/Create, Users/Show, etc.)... -->
+  <Link
+    href="/users"
+    class={$page.component.startsWith('Users') ? 'active' : ''}
+  >
+    Users
+  </Link>
+</template>
 ```
 
 :::
diff --git a/docs/guide/load-when-visible.md b/docs/guide/load-when-visible.md
index 493adaa..a2752e9 100644
--- a/docs/guide/load-when-visible.md
+++ b/docs/guide/load-when-visible.md
@@ -141,10 +141,11 @@ export default () => (
   {#snippet fallback()}
     <div>Loading...</div>
   {/snippet}
-  
+
   <!-- Props are now loaded -->
 </WhenVisible>
 ```
+
 :::
 
 ## Loading before visible
@@ -197,7 +198,7 @@ export default () => (
   <svelte:fragment slot="fallback">
     <div>Loading...</div>
   </svelte:fragment>
-  
+
   {#each permissions as permission}
     <!-- ... -->
   {/each}
@@ -267,7 +268,7 @@ export default () => (
 </script>
 
 <WhenVisible data="products" as="span">
-  // ...
+  <!-- ... -->
 </WhenVisible>
 ```
 
@@ -284,6 +285,7 @@ export default () => (
   <!-- ... -->
 </WhenVisible>
 ```
+
 :::
 
 ## Always trigger
@@ -336,7 +338,7 @@ export default () => (
 ```
 
 == Svelte 5
-  
+
 ```svelte
 <script>
   import { WhenVisible } from '@inertiajs/svelte'
@@ -348,5 +350,5 @@ export default () => (
   <!-- ... -->
 </WhenVisible>
 ```
-:::
 
+:::
diff --git a/docs/guide/manual-visits.md b/docs/guide/manual-visits.md
index 29f4053..0142bb2 100644
--- a/docs/guide/manual-visits.md
+++ b/docs/guide/manual-visits.md
@@ -406,7 +406,6 @@ By default, page visits to the same page create a fresh page component instance.
 
 However, in some situations, it's necessary to preserve the page component state. For example, when submitting a form, you need to preserve your form data in the event that form validation fails on the server.
 
-
 For this reason, the `post`, `put`, `patch`, `delete`, and `reload` methods all set the `preserveState` option to `true` by default.
 
 You can instruct Inertia to preserve the component's state when using the `get` method by setting the `preserveState` option to `true`.
diff --git a/docs/guide/merging-props.md b/docs/guide/merging-props.md
index 06e144f..1ab6b03 100644
--- a/docs/guide/merging-props.md
+++ b/docs/guide/merging-props.md
@@ -15,7 +15,7 @@ class UsersController < ApplicationController
 
     render inertia: 'Users/Index', props: {
       results: InertiaRails.merge(records),
- 
+
       # Also works with block:
       # results: InertiaRails.merge { records },
 
@@ -51,7 +51,7 @@ The `reset` request option accepts an array of the props keys you would like to
 :::tabs key:frameworks
 == Vue
 
-```vue
+```js
 import { router } from '@inertiajs/vue3'
 
 router.reload({ reset: ['results'] })
@@ -59,7 +59,7 @@ router.reload({ reset: ['results'] })
 
 == React
 
-```jsx
+```js
 import { router } from '@inertiajs/react'
 
 router.reload({ reset: ['results'] })
@@ -67,7 +67,7 @@ router.reload({ reset: ['results'] })
 
 == Svelte 4|Svelte 5
 
-```svelte
+```js
 import { router } from '@inertiajs/svelte'
 
 router.reload({ reset: ['results'] })
diff --git a/docs/guide/pages.md b/docs/guide/pages.md
index 8cf95bb..d380bcb 100644
--- a/docs/guide/pages.md
+++ b/docs/guide/pages.md
@@ -82,6 +82,7 @@ export default function Welcome({ user }) {
   <p>Hello {user.name}, welcome to your first Inertia app!</p>
 </Layout>
 ```
+
 :::
 
 Given the page above, you can render the page by returning an Inertia response from a controller or route. In this example, let's assume this page is stored at `app/frontend/pages/User/Show.(jsx|vue|svelte)` within a Rails application.
@@ -96,7 +97,7 @@ class UsersController < ApplicationController
 end
 ```
 
-See [the responses documentation](/guide/responses) for more information on how to return Inertia responses from your controllers. 
+See [the responses documentation](/guide/responses) for more information on how to return Inertia responses from your controllers.
 
 ## Creating layouts
 
@@ -250,6 +251,7 @@ export default Home
 </script>
 
 <h1>Welcome</h1>
+
 <p>Hello {user.name}, welcome to your first Inertia app!</p>
 ```
 
@@ -265,6 +267,7 @@ export default Home
 </script>
 
 <h1>Welcome</h1>
+
 <p>Hello {user.name}, welcome to your first Inertia app!</p>
 ```
 
@@ -357,6 +360,7 @@ export default Home
 </script>
 
 <h1>Welcome</h1>
+
 <p>Hello {user.name}, welcome to your first Inertia app!</p>
 ```
 
@@ -379,6 +383,7 @@ export default Home
 </script>
 
 <h1>Welcome</h1>
+
 <p>Hello {user.name}, welcome to your first Inertia app!</p>
 ```
 
diff --git a/docs/guide/partial-reloads.md b/docs/guide/partial-reloads.md
index f7a6102..871e769 100644
--- a/docs/guide/partial-reloads.md
+++ b/docs/guide/partial-reloads.md
@@ -88,7 +88,7 @@ Since partial reloads can only be made to the same page component the user is al
 :::tabs key:frameworks
 == Vue
 
-```vue
+```js
 import { router } from '@inertiajs/vue3'
 
 router.reload({ only: ['users'] })
@@ -96,7 +96,7 @@ router.reload({ only: ['users'] })
 
 == React
 
-```jsx
+```js
 import { router } from '@inertiajs/react'
 
 router.reload({ only: ['users'] })
@@ -104,7 +104,7 @@ router.reload({ only: ['users'] })
 
 == Svelte 4|Svelte 5
 
-```svelte
+```js
 import { router } from '@inertiajs/svelte'
 
 router.reload({ only: ['users'] })
@@ -120,9 +120,13 @@ It's also possible to perform partial reloads with Inertia links using the `only
 == Vue
 
 ```vue
+<script setup>
 import { Link } from '@inertiajs/vue3'
+</script>
 
-<Link href="/users?active=true" :only="['users']">Show active</Link>
+<template>
+  <Link href="/users?active=true" :only="['users']">Show active</Link>
+</template>
 ```
 
 == React
@@ -130,15 +134,19 @@ import { Link } from '@inertiajs/vue3'
 ```jsx
 import { Link } from '@inertiajs/react'
 
-<Link href="/users?active=true" only={['users']}>
-  Show active
-</Link>
+export default () => (
+  <Link href="/users?active=true" only={['users']}>
+    Show active
+  </Link>
+)
 ```
 
 == Svelte 4|Svelte 5
 
 ```svelte
-import { inertia, Link } from '@inertiajs/svelte'
+<script>
+  import { inertia, Link } from '@inertiajs/svelte'
+</script>
 
 <a href="/users?active=true" use:inertia={{ only: ['users'] }}>Show active</a>
 
diff --git a/docs/guide/polling.md b/docs/guide/polling.md
index 1c111f4..ec035ae 100644
--- a/docs/guide/polling.md
+++ b/docs/guide/polling.md
@@ -27,11 +27,11 @@ usePoll(2000)
 import { usePoll } from '@inertiajs/svelte'
 usePoll(2000)
 ```
+
 :::
 
 If you need to pass additional request options to the poll helper, you can pass any of the `router.reload` options as the second parameter.
 
-
 :::tabs key:frameworks
 == Vue
 
@@ -40,11 +40,11 @@ import { usePoll } from '@inertiajs/vue3'
 
 usePoll(2000, {
   onStart() {
-      console.log('Polling request started')
+    console.log('Polling request started')
   },
   onFinish() {
-      console.log('Polling request finished')
-  }
+    console.log('Polling request finished')
+  },
 })
 ```
 
@@ -55,11 +55,11 @@ import { usePoll } from '@inertiajs/react'
 
 usePoll(2000, {
   onStart() {
-      console.log('Polling request started')
+    console.log('Polling request started')
   },
   onFinish() {
-      console.log('Polling request finished')
-  }
+    console.log('Polling request finished')
+  },
 })
 ```
 
@@ -70,16 +70,17 @@ import { usePoll } from '@inertiajs/svelte'
 
 usePoll(2000, {
   onStart() {
-      console.log('Polling request started')
+    console.log('Polling request started')
   },
   onFinish() {
-      console.log('Polling request finished')
-  }
+    console.log('Polling request finished')
+  },
 })
 ```
+
 :::
 
-If you'd like more control over the polling behavior, the poll helper provides `stop` and  `start` methods that allow you to manually start and stop polling. You can pass the `autoStart: false` option to the poll helper to prevent it from automatically starting polling when the component is mounted.
+If you'd like more control over the polling behavior, the poll helper provides `stop` and `start` methods that allow you to manually start and stop polling. You can pass the `autoStart: false` option to the poll helper to prevent it from automatically starting polling when the component is mounted.
 
 :::tabs key:frameworks
 == Vue
@@ -87,16 +88,19 @@ If you'd like more control over the polling behavior, the poll helper provides `
 ```vue
 <script setup>
 import { usePoll } from '@inertiajs/vue3'
-const { start, stop } = usePoll(2000, {}, {
-  autoStart: false,
-})
+const { start, stop } = usePoll(
+  2000,
+  {},
+  {
+    autoStart: false,
+  },
+)
 </script>
 
 <template>
   <button @click="start">Start polling</button>
   <button @click="stop">Stop polling</button>
 </template>
-
 ```
 
 == React
@@ -105,9 +109,13 @@ const { start, stop } = usePoll(2000, {}, {
 import { usePoll } from '@inertiajs/react'
 
 export default () => {
-  const { start, stop } = usePoll(2000, {}, {
-    autoStart: false,
-  })
+  const { start, stop } = usePoll(
+    2000,
+    {},
+    {
+      autoStart: false,
+    },
+  )
   return (
     <div>
       <button onClick={start}>Start polling</button>
@@ -121,18 +129,22 @@ export default () => {
 
 ```svelte
 <script>
-import { usePoll } from '@inertiajs/svelte'
-
-const { start, stop } = usePoll(2000, {}, {
-  autoStart: false,
-})
+  import { usePoll } from '@inertiajs/svelte'
+
+  const { start, stop } = usePoll(
+    2000,
+    {},
+    {
+      autoStart: false,
+    },
+  )
 </script>
 
 <button on:click={start}>Start polling</button>
 <button on:click={stop}>Stop polling</button>
 ```
-:::
 
+:::
 
 ## Throttling
 
@@ -144,9 +156,13 @@ By default, the poll helper will throttle requests by 90% when the browser tab i
 ```js
 import { usePoll } from '@inertiajs/vue3'
 
-usePoll(2000, {}, {
-  keepAlive: true,
-})
+usePoll(
+  2000,
+  {},
+  {
+    keepAlive: true,
+  },
+)
 ```
 
 == React
@@ -154,9 +170,13 @@ usePoll(2000, {}, {
 ```js
 import { usePoll } from '@inertiajs/react'
 
-usePoll(2000, {}, {
-  keepAlive: true,
-})
+usePoll(
+  2000,
+  {},
+  {
+    keepAlive: true,
+  },
+)
 ```
 
 == Svelte 4|Svelte 5
@@ -164,8 +184,13 @@ usePoll(2000, {}, {
 ```js
 import { usePoll } from '@inertiajs/svelte'
 
-usePoll(2000, {}, {
-  keepAlive: true,
-})
+usePoll(
+  2000,
+  {},
+  {
+    keepAlive: true,
+  },
+)
 ```
+
 :::
diff --git a/docs/guide/prefetching.md b/docs/guide/prefetching.md
index 82e34db..0a227e6 100644
--- a/docs/guide/prefetching.md
+++ b/docs/guide/prefetching.md
@@ -11,7 +11,7 @@ To prefetch data for a page, you can use the `prefetch` method on the Inertia li
 
 ```vue
 <script setup>
-  import { Link } from '@inertiajs/vue3'
+import { Link } from '@inertiajs/vue3'
 </script>
 
 <template>
@@ -25,7 +25,9 @@ To prefetch data for a page, you can use the `prefetch` method on the Inertia li
 import { Link } from '@inertiajs/react'
 
 export default () => (
-  <Link href="/users" prefetch>Users</Link>
+  <Link href="/users" prefetch>
+    Users
+  </Link>
 )
 ```
 
@@ -38,6 +40,7 @@ export default () => (
 
 <a href="/users" use:inertia={{ prefetch: true }}>Users</a>
 ```
+
 :::
 
 By default, data is cached for 30 seconds before being evicted. You can customize this behavior by passing a `cacheFor` prop to the `Link` component.
@@ -47,7 +50,7 @@ By default, data is cached for 30 seconds before being evicted. You can customiz
 
 ```vue
 <script setup>
-  import { Link } from '@inertiajs/vue3'
+import { Link } from '@inertiajs/vue3'
 </script>
 
 <template>
@@ -64,9 +67,15 @@ import { Link } from '@inertiajs/react'
 
 export default () => (
   <>
-    <Link href="/users" prefetch cacheFor="1m">Users</Link>
-    <Link href="/users" prefetch cacheFor="10s">Users</Link>
-    <Link href="/users" prefetch cacheFor={5000}>Users</Link>
+    <Link href="/users" prefetch cacheFor="1m">
+      Users
+    </Link>
+    <Link href="/users" prefetch cacheFor="10s">
+      Users
+    </Link>
+    <Link href="/users" prefetch cacheFor={5000}>
+      Users
+    </Link>
   </>
 )
 ```
@@ -82,6 +91,7 @@ export default () => (
 <a href="/users" use:inertia={{ prefetch: true, cacheFor: '10s' }}>Users</a>
 <a href="/users" use:inertia={{ prefetch: true, cacheFor: 5000 }}>Users</a>
 ```
+
 :::
 
 You can also start prefetching on `mousedown` by passing the `click` value to the `prefetch` prop.
@@ -91,7 +101,7 @@ You can also start prefetching on `mousedown` by passing the `click` value to th
 
 ```vue
 <script setup>
-  import { Link } from '@inertiajs/vue3'
+import { Link } from '@inertiajs/vue3'
 </script>
 
 <template>
@@ -105,7 +115,9 @@ You can also start prefetching on `mousedown` by passing the `click` value to th
 import { Link } from '@inertiajs/react'
 
 export default () => (
-  <Link href="/users" prefetch="click">Users</Link>
+  <Link href="/users" prefetch="click">
+    Users
+  </Link>
 )
 ```
 
@@ -118,17 +130,17 @@ export default () => (
 
 <a href="/users" use:inertia={{ prefetch: 'click' }}>Users</a>
 ```
+
 :::
 
 If you're confident that the user will visit a page next, you can prefetch the data on mount as well.
 
-
 :::tabs key:frameworks
 == Vue
 
 ```vue
 <script setup>
-  import { Link } from '@inertiajs/vue3'
+import { Link } from '@inertiajs/vue3'
 </script>
 
 <template>
@@ -142,7 +154,9 @@ If you're confident that the user will visit a page next, you can prefetch the d
 import { Link } from '@inertiajs/react'
 
 export default () => (
-  <Link href="/users" prefetch="mount">Users</Link>
+  <Link href="/users" prefetch="mount">
+    Users
+  </Link>
 )
 ```
 
@@ -155,6 +169,7 @@ export default () => (
 
 <a href="/users" use:inertia={{ prefetch: 'mount' }}>Users</a>
 ```
+
 :::
 
 You can also combine strategies by passing an array of values to the `prefetch` prop.
@@ -164,7 +179,7 @@ You can also combine strategies by passing an array of values to the `prefetch`
 
 ```vue
 <script setup>
-  import { Link } from '@inertiajs/vue3'
+import { Link } from '@inertiajs/vue3'
 </script>
 
 <template>
@@ -178,7 +193,9 @@ You can also combine strategies by passing an array of values to the `prefetch`
 import { Link } from '@inertiajs/react'
 
 export default () => (
-  <Link href="/users" prefetch={['mount', 'hover']}>Users</Link>
+  <Link href="/users" prefetch={['mount', 'hover']}>
+    Users
+  </Link>
 )
 ```
 
@@ -191,6 +208,7 @@ export default () => (
 
 <a href="/users" use:inertia={{ prefetch: ['mount', 'hover'] }}>Users</a>
 ```
+
 :::
 
 ## Programmatic prefetching
@@ -200,16 +218,15 @@ You can also prefetch data programmatically using `router.prefetch`. The signatu
 When the `cacheFor` option is not specified, it defaults to 30 seconds.
 
 ```js
-router.prefetch(
-  '/users',
-  { method: 'get', data: { page: 2 } },
-)
+router.prefetch('/users', { method: 'get', data: { page: 2 } })
+
 router.prefetch(
   '/users',
   { method: 'get', data: { page: 2 } },
   { cacheFor: '1m' },
 )
 ```
+
 To make this even easier, Inertia offers a prefetch helper. This helper provides some additional insight into the request, such as the last updated timestamp and if the request is currently prefetching.
 
 :::tabs key:frameworks
@@ -248,6 +265,7 @@ const { lastUpdatedAt, isPrefetching, isPrefetched } = usePrefetch(
   { cacheFor: '1m' },
 )
 ```
+
 :::
 
 ## Flushing prefetch cache
@@ -261,16 +279,12 @@ Furthermore, if you are using the prefetch helper, it will return a `flush` meth
 ```js
 // Flush all prefetch cache
 router.flushAll()
+
 // Flush cache for a specific page
-router.flush(
-  '/users',
-  { method: 'get', data: { page: 2 } },
-)
-const { flush } = usePrefetch(
-  '/users',
-  { method: 'get', data: { page: 2 } },
-)
+router.flush('/users', { method: 'get', data: { page: 2 } })
+
 // Flush cache for a specific page
+const { flush } = usePrefetch('/users', { method: 'get', data: { page: 2 } })
 flush()
 ```
 
@@ -299,7 +313,9 @@ import { Link } from '@inertiajs/vue3'
 import { Link } from '@inertiajs/react'
 
 export default () => (
-  <Link href="/users" prefetch cacheFor={['30s', '1m']}>Users</Link>
+  <Link href="/users" prefetch cacheFor={['30s', '1m']}>
+    Users
+  </Link>
 )
 ```
 
@@ -310,8 +326,11 @@ export default () => (
   import { inertia } from '@inertiajs/svelte'
 </script>
 
-<a href="/users" use:inertia={{ prefetch: true, cacheFor: ['30s', '1m'] }}>Users</a>
+<a href="/users" use:inertia={{ prefetch: true, cacheFor: ['30s', '1m'] }}>
+  Users
+</a>
 ```
+
 :::
 
 ### How it works
diff --git a/docs/guide/remembering-state.md b/docs/guide/remembering-state.md
index ae5f1ed..886c78d 100644
--- a/docs/guide/remembering-state.md
+++ b/docs/guide/remembering-state.md
@@ -10,7 +10,6 @@ To mitigate this issue, you can tell Inertia which local component state to save
 
 To save local component state to the history state, use the "useRemember" hook to tell Inertia which data it should remember.
 
-
 :::tabs key:frameworks
 == Vue
 
diff --git a/docs/guide/responses.md b/docs/guide/responses.md
index 0db475c..c67d2d7 100644
--- a/docs/guide/responses.md
+++ b/docs/guide/responses.md
@@ -62,8 +62,8 @@ class EventsController < ApplicationController
   end
 end
 ```
-This renders the `app/frontend/pages/events/index.(jsx|vue|svelte)` page component and passes the `@events` instance variable as the `events` prop.
 
+This renders the `app/frontend/pages/events/index.(jsx|vue|svelte)` page component and passes the `@events` instance variable as the `events` prop.
 
 Setting the `default_render` configuration value to `true` establishes this as the default behavior:
 
@@ -76,7 +76,7 @@ end
 ```ruby
 class EventsController < ApplicationController
   use_inertia_instance_props
-  
+
   def index
     @events = Event.all
   end
@@ -125,7 +125,7 @@ You can then access this variable like a regular local variable.
 
 ## Rails generators
 
-Gem `inertia_rails-contrib` provides a number of generators to help you get started with Inertia in your Rails application. You can generate controllers or use scaffolds to create a new resource with Inertia responses. 
+Gem `inertia_rails-contrib` provides a number of generators to help you get started with Inertia in your Rails application. You can generate controllers or use scaffolds to create a new resource with Inertia responses.
 
 ### Scaffold generator
 
diff --git a/docs/guide/scroll-management.md b/docs/guide/scroll-management.md
index 955328a..c5139c5 100644
--- a/docs/guide/scroll-management.md
+++ b/docs/guide/scroll-management.md
@@ -107,9 +107,13 @@ When using an [Inertia link](/guide/links), you can preserve the scroll position
 == Vue
 
 ```vue
+<script setup>
 import { Link } from '@inertiajs/vue3'
+</script>
 
-<Link href="/" preserve-scroll>Home</Link>
+<template>
+  <Link href="/" preserve-scroll>Home</Link>
+</template>
 ```
 
 == React
@@ -117,15 +121,19 @@ import { Link } from '@inertiajs/vue3'
 ```jsx
 import { Link } from '@inertiajs/react'
 
-<Link href="/" preserveScroll>
-  Home
-</Link>
+export default () => (
+  <Link href="/" preserveScroll>
+    Home
+  </Link>
+)
 ```
 
 == Svelte 4|Svelte 5
 
 ```svelte
-import { inertia, Link } from '@inertiajs/svelte'
+<script>
+  import { inertia, Link } from '@inertiajs/svelte'
+</script>
 
 <a href="/" use:inertia={{ preserveScroll: true }}>Home</a>
 
diff --git a/docs/guide/server-side-rendering.md b/docs/guide/server-side-rendering.md
index b276df3..c32a085 100644
--- a/docs/guide/server-side-rendering.md
+++ b/docs/guide/server-side-rendering.md
@@ -201,15 +201,16 @@ createInertiaApp({
     const pages = import.meta.glob('../pages/**/*.svelte', { eager: true })
     return pages[`../pages/${name}.svelte`]
   },
-  setup({ el, App }) {
-    new App({ target: el }) // [!code --]
-    new App({ target: el, hydrate: true }) // [!code ++]
+  setup({ el, App, props }) {
+    new App({ target: el, props }) // [!code --]
+    new App({ target: el, props, hydrate: true }) // [!code ++]
   },
 })
 ```
 
 You will also need to set the `hydratable` compiler option to `true` in your `vite.config.js` file:
 
+<!-- prettier-ignore -->
 ```js
 // vite.config.js
 import { svelte } from '@sveltejs/vite-plugin-svelte'
@@ -237,6 +238,7 @@ export default defineConfig({
 
 == Svelte 5
 
+<!-- prettier-ignore -->
 ```js
 // frontend/entrypoints/inertia.js
 import { createInertiaApp } from '@inertiajs/svelte'
@@ -244,18 +246,18 @@ import { mount } from 'svelte' // [!code --]
 import { hydrate, mount } from 'svelte' // [!code ++]
 
 createInertiaApp({
-   resolve: name => {
-     const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true })
-     return pages[`./Pages/${name}.svelte`]
-   },
-   setup({ el, App }) {
-     mount(App, { target: el }) // [!code --]
-     if (el.dataset.serverRendered === 'true') { // [!code ++]
-       hydrate(App, { target: el }) // [!code ++]
-     } else { // [!code ++]
-       mount(App, { target: el }) // [!code ++]
-     } // [!code ++]
-   },
+  resolve: (name) => {
+    const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true })
+    return pages[`./Pages/${name}.svelte`]
+  },
+  setup({ el, App, props }) {
+    mount(App, { target: el, props }) // [!code --]
+    if (el.dataset.serverRendered === 'true') { // [!code ++]
+      hydrate(App, { target: el, props }) // [!code ++]
+    } else { // [!code ++]
+      mount(App, { target: el, props }) // [!code ++]
+    } // [!code ++]
+  },
 })
 ```
 
diff --git a/docs/guide/server-side-setup.md b/docs/guide/server-side-setup.md
index da0dc74..e6fa8ed 100644
--- a/docs/guide/server-side-setup.md
+++ b/docs/guide/server-side-setup.md
@@ -25,6 +25,7 @@ bin/rails generate inertia:install
 ```
 
 This command will:
+
 - Check for Vite Rails and install it if not present
 - Ask if you want to use TypeScript
 - Ask you to choose your preferred frontend framework (React, Vue, or Svelte)
@@ -37,7 +38,7 @@ This command will:
 > To use TypeScript with Svelte, you need to install `@inertiajs/svelte` version `1.3.0-beta.1` or higher. You can use the `--inertia-version` option to specify the version.
 
 > [!NOTE]
-> `inertia_rails-contrib` doesn't include [Rails scaffold generators](/guide/responses#rails-generators) for TypeScript yet.
+> The `inertia_rails-contrib` gem doesn't include [Rails scaffold generators](/guide/responses#rails-generators) for TypeScript yet.
 
 Example output:
 
diff --git a/docs/guide/title-and-meta.md b/docs/guide/title-and-meta.md
index 7d27c26..00745de 100644
--- a/docs/guide/title-and-meta.md
+++ b/docs/guide/title-and-meta.md
@@ -16,12 +16,16 @@ To add `<head>` elements to your page, use the `<Head>` component. Within this c
 == Vue
 
 ```vue
+<script setup>
 import { Head } from '@inertiajs/vue3'
+</script>
 
-<Head>
-  <title>Your page title</title>
-  <meta name="description" content="Your page description" />
-</Head>
+<template>
+  <Head>
+    <title>Your page title</title>
+    <meta name="description" content="Your page description" />
+  </Head>
+</template>
 ```
 
 == React
@@ -29,10 +33,12 @@ import { Head } from '@inertiajs/vue3'
 ```jsx
 import { Head } from '@inertiajs/react'
 
-<Head>
-  <title>Your page title</title>
-  <meta name="description" content="Your page description" />
-</Head>
+export default () => (
+  <Head>
+    <title>Your page title</title>
+    <meta name="description" content="Your page description" />
+  </Head>
+)
 ```
 
 == Svelte 4|Svelte 5
@@ -57,9 +63,13 @@ If you only need to add a `<title>` to the document `<head>`, you may simply pas
 == Vue
 
 ```vue
+<script setup>
 import { Head } from '@inertiajs/vue3'
+</script>
 
-<Head title="Your page title" />
+<template>
+  <Head title="Your page title" />
+</template>
 ```
 
 == React
@@ -67,12 +77,12 @@ import { Head } from '@inertiajs/vue3'
 ```jsx
 import { Head } from '@inertiajs/react'
 
-<Head title="Your page title" />
+export default () => <Head title="Your page title" />
 ```
 
 == Svelte 4|Svelte 5
 
-```svelte
+```js
 // Not supported
 ```
 
@@ -95,9 +105,13 @@ After defining the title callback, the callback will automatically be invoked wh
 == Vue
 
 ```vue
+<script setup>
 import { Head } from '@inertiajs/vue3'
+</script>
 
-<Head title="Home" />
+<template>
+  <Head title="Home" />
+</template>
 ```
 
 == React
@@ -105,12 +119,12 @@ import { Head } from '@inertiajs/vue3'
 ```jsx
 import { Head } from '@inertiajs/react'
 
-<Head title="Home" />
+export default () => <Head title="Home" />
 ```
 
 == Svelte 4|Svelte 5
 
-```svelte
+```js
 // Not supported
 ```
 
@@ -118,7 +132,7 @@ import { Head } from '@inertiajs/react'
 
 Which, in this example, will result in the following `<title>` tag.
 
-```js
+```html
 <title>Home - My App</title>
 ```
 
@@ -128,11 +142,15 @@ The `title` callback will also be invoked when you set the title using a `<title
 == Vue
 
 ```vue
+<script setup>
 import { Head } from '@inertiajs/vue3'
+</script>
 
-<Head>
-  <title>Home</title>
-</Head>
+<template>
+  <Head>
+    <title>Home</title>
+  </Head>
+</template>
 ```
 
 == React
@@ -140,14 +158,16 @@ import { Head } from '@inertiajs/vue3'
 ```jsx
 import { Head } from '@inertiajs/react'
 
-<Head>
-  <title>Home</title>
-</Head>
+export default () => (
+  <Head>
+    <title>Home</title>
+  </Head>
+)
 ```
 
 == Svelte 4|Svelte 5
 
-```svelte
+```js
 // Not supported
 ```
 
@@ -161,56 +181,76 @@ It's possible to have multiple instances of the `<Head>` component throughout yo
 == Vue
 
 ```vue
-// Layout.vue import { Head } from '@inertiajs/vue3'
+<!-- Layout.vue -->
+<script setup>
+import { Head } from '@inertiajs/vue3'
+</script>
 
-<Head>
-  <title>My app</title>
-  <meta head-key="description" name="description" content="This is the default description" />
-  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-</Head>
+<template>
+  <Head>
+    <title>My app</title>
+    <meta
+      head-key="description"
+      name="description"
+      content="This is the default description"
+    />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  </Head>
+</template>
 
-// About.vue import { Head } from '@inertiajs/vue3'
+<!-- About.vue -->
+<script setup>
+import { Head } from '@inertiajs/vue3'
+</script>
 
-<Head>
-  <title>About - My app</title>
-  <meta head-key="description" name="description" content="This is a page specific description" />
-</Head>
+<template>
+  <Head>
+    <title>About - My app</title>
+    <meta
+      head-key="description"
+      name="description"
+      content="This is a page specific description"
+    />
+  </Head>
+</template>
 ```
 
 == React
 
 ```jsx
 // Layout.jsx
-
 import { Head } from '@inertiajs/react'
 
-<Head>
-  <title>My app</title>
-  <meta
-    head-key="description"
-    name="description"
-    content="This is the default description"
-  />
-  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-</Head>
+export default () => (
+  <Head>
+    <title>My app</title>
+    <meta
+      head-key="description"
+      name="description"
+      content="This is the default description"
+    />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  </Head>
+)
 
 // About.jsx
-
 import { Head } from '@inertiajs/react'
 
-<Head>
-  <title>About - My app</title>
-  <meta
-    head-key="description"
-    name="description"
-    content="This is a page specific description"
-  />
-</Head>
+export default () => (
+  <Head>
+    <title>About - My app</title>
+    <meta
+      head-key="description"
+      name="description"
+      content="This is a page specific description"
+    />
+  </Head>
+)
 ```
 
 == Svelte 4|Svelte 5
 
-```svelte
+```js
 // Not supported
 ```
 
@@ -237,7 +277,6 @@ When building a real application, it can sometimes be helpful to create a custom
 
 ```vue
 <!-- AppHead.vue -->
-
 <script setup>
 import { Head } from '@inertiajs/vue3'
 
@@ -255,10 +294,9 @@ defineProps({ title: String })
 
 ```jsx
 // AppHead.jsx
-
 import { Head } from '@inertiajs/react'
 
-const AppHead = ({ title, children }) => {
+export default ({ title, children }) => {
   return (
     <Head>
       <title>{title ? `${title} - My App` : 'My App'}</title>
@@ -266,13 +304,11 @@ const AppHead = ({ title, children }) => {
     </Head>
   )
 }
-
-export default AppHead
 ```
 
 == Svelte 4|Svelte 5
 
-```svelte
+```js
 // Not supported
 ```
 
@@ -284,9 +320,13 @@ Once you have created the custom component, you may simply start using the custo
 == Vue
 
 ```vue
+<script setup>
 import AppHead from './AppHead'
+</script>
 
-<AppHead title="About" />
+<template>
+  <AppHead title="About" />
+</template>
 ```
 
 == React
@@ -294,12 +334,12 @@ import AppHead from './AppHead'
 ```jsx
 import AppHead from './AppHead'
 
-<AppHead title="About" />
+export default () => <AppHead title="About" />
 ```
 
 == Svelte 4|Svelte 5
 
-```svelte
+```js
 // Not supported
 ```
 
diff --git a/docs/guide/upgrade-guide.md b/docs/guide/upgrade-guide.md
index 7ac6681..81fe2eb 100644
--- a/docs/guide/upgrade-guide.md
+++ b/docs/guide/upgrade-guide.md
@@ -1,8 +1,8 @@
 # Upgrade guide for v2.0
 
 > [!NOTE]
-> Inertia.js v2.0 is still in beta and these docs are a work-in-progress. Please report bugs on 
-https://github.com/inertiajs/inertia https://github.com/inertiajs/inertia-rails and https://github.com/skryukov/inertia-rails_contrib
+> Inertia.js v2.0 is still in beta and these docs are a work-in-progress. Please report bugs on
+> https://github.com/inertiajs/inertia https://github.com/inertiajs/inertia-rails and https://github.com/skryukov/inertia-rails_contrib
 
 ## What's new
 
@@ -17,6 +17,7 @@ Inertia.js v2.0 is a huge step forward for Inertia! The core library has been co
 Additionally, for security sensitive projects, Inertia now offers a [history encryption API](/guide/history-encryption), allowing you to clear page data from history state when logging out of an application.
 
 ## Upgrade dependencies
+
 To upgrade to the Inertia.js v2.0 beta, first use npm to install the client-side adapter of your choice:
 
 :::tabs key:frameworks
@@ -37,6 +38,7 @@ npm install @inertiajs/react@next
 ```svelte
 npm install @inertiajs/svelte@next
 ```
+
 :::
 
 Next, upgrade the `inertia-rails` gem to use the unreleased version of the gem from [the PR branch](https://github.com/inertiajs/inertia-rails/pull/132):
diff --git a/docs/guide/validation.md b/docs/guide/validation.md
index 4020cce..9172322 100644
--- a/docs/guide/validation.md
+++ b/docs/guide/validation.md
@@ -147,15 +147,15 @@ export default function Edit() {
 
 <form on:submit|preventDefault={handleSubmit}>
   <label for="first_name">First name:</label>
-  <input id="first_name" bind:value={values.first_name}>
+  <input id="first_name" bind:value={values.first_name} />
   {#if errors.first_name}<div>{errors.first_name}</div>{/if}
 
   <label for="last_name">Last name:</label>
-  <input id="last_name" bind:value={values.last_name}>
+  <input id="last_name" bind:value={values.last_name} />
   {#if errors.last_name}<div>{errors.last_name}</div>{/if}
 
   <label for="email">Email:</label>
-  <input id="email" bind:value={values.email}>
+  <input id="email" bind:value={values.email} />
   {#if errors.email}<div>{errors.email}</div>{/if}
 
   <button type="submit">Submit</button>
diff --git a/docs/package-lock.json b/docs/package-lock.json
index 5fb0e13..3583153 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -6,6 +6,11 @@
     "": {
       "devDependencies": {
         "markdown-it-container": "^4.0.0",
+        "prettier": "^3.3.3",
+        "prettier-plugin-organize-imports": "^4.1.0",
+        "prettier-plugin-svelte": "^3.2.7",
+        "prettier-plugin-tailwindcss": "^0.6.8",
+        "prettier-plugin-vue": "^1.1.6",
         "vitepress": "^1.2.2",
         "vitepress-plugin-tabs": "^0.5.0",
         "vue": "^3.4.27"
@@ -204,6 +209,20 @@
         "@algolia/requester-common": "4.23.3"
       }
     },
+    "node_modules/@ampproject/remapping": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
+      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@babel/parser": {
       "version": "7.24.6",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.6.tgz",
@@ -632,12 +651,58 @@
         "node": ">=12"
       }
     },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
+      "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/set-array": "^1.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.4.15",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
       "dev": true
     },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.22.4",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.22.4.tgz",
@@ -1221,6 +1286,29 @@
         }
       }
     },
+    "node_modules/acorn": {
+      "version": "8.13.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.13.0.tgz",
+      "integrity": "sha512-8zSiw54Oxrdym50NlZ9sUusyO1Z1ZchgRLWRaK6c86XJFClyCgFKetdowBg5bKxyp/u+CDBJG4Mpp0m3HLZl9w==",
+      "dev": true,
+      "peer": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-typescript": {
+      "version": "1.4.13",
+      "resolved": "https://registry.npmjs.org/acorn-typescript/-/acorn-typescript-1.4.13.tgz",
+      "integrity": "sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==",
+      "dev": true,
+      "peer": true,
+      "peerDependencies": {
+        "acorn": ">=8.9.0"
+      }
+    },
     "node_modules/algoliasearch": {
       "version": "4.23.3",
       "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.23.3.tgz",
@@ -1244,6 +1332,26 @@
         "@algolia/transporter": "4.23.3"
       }
     },
+    "node_modules/aria-query": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
+      "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/axobject-query": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
+      "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -1300,6 +1408,24 @@
         "@esbuild/win32-x64": "0.21.5"
       }
     },
+    "node_modules/esm-env": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.0.0.tgz",
+      "integrity": "sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/esrap": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/esrap/-/esrap-1.2.2.tgz",
+      "integrity": "sha512-F2pSJklxx1BlQIQgooczXCPHmcWpn6EsP5oo73LQfonG9fIlIENQ8vMmfGXeojP9MrkzUNAfyU5vdFlR9shHAw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "@types/estree": "^1.0.1"
+      }
+    },
     "node_modules/estree-walker": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
@@ -1335,13 +1461,30 @@
       "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
       "dev": true
     },
+    "node_modules/is-reference": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
+      "integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
+    "node_modules/locate-character": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
+      "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/magic-string": {
-      "version": "0.30.10",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz",
-      "integrity": "sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==",
+      "version": "0.30.12",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.12.tgz",
+      "integrity": "sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==",
       "dev": true,
       "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.15"
+        "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
     "node_modules/mark.js": {
@@ -1436,6 +1579,149 @@
         "url": "https://opencollective.com/preact"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
+      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-plugin-organize-imports": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-organize-imports/-/prettier-plugin-organize-imports-4.1.0.tgz",
+      "integrity": "sha512-5aWRdCgv645xaa58X8lOxzZoiHAldAPChljr/MT0crXVOWTZ+Svl4hIWlz+niYSlO6ikE5UXkN1JrRvIP2ut0A==",
+      "dev": true,
+      "peerDependencies": {
+        "prettier": ">=2.0",
+        "typescript": ">=2.9",
+        "vue-tsc": "^2.1.0"
+      },
+      "peerDependenciesMeta": {
+        "vue-tsc": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/prettier-plugin-svelte": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-3.2.7.tgz",
+      "integrity": "sha512-/Dswx/ea0lV34If1eDcG3nulQ63YNr5KPDfMsjbdtpSWOxKKJ7nAc2qlVuYwEvCr4raIuredNoR7K4JCkmTGaQ==",
+      "dev": true,
+      "peerDependencies": {
+        "prettier": "^3.0.0",
+        "svelte": "^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0"
+      }
+    },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.6.8",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.8.tgz",
+      "integrity": "sha512-dGu3kdm7SXPkiW4nzeWKCl3uoImdd5CTZEJGxyypEPL37Wj0HT2pLqjrvSei1nTeuQfO4PUfjeW5cTUNRLZ4sA==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.21.3"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "@zackad/prettier-plugin-twig-melody": "*",
+        "prettier": "^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-import-sort": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-marko": "*",
+        "prettier-plugin-multiline-arrays": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-sort-imports": "*",
+        "prettier-plugin-style-order": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@zackad/prettier-plugin-twig-melody": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-import-sort": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-multiline-arrays": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-style-order": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/prettier-plugin-vue": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-vue/-/prettier-plugin-vue-1.1.6.tgz",
+      "integrity": "sha512-trQ/oY+6hSsGe2zPIFThXMIM0TbxMEbk2VOrKjwHWuSz7OEo0rnumbz9a47OxVPCaAnGY9vZG8qDTiTmk9bq0A==",
+      "dev": true,
+      "dependencies": {
+        "prettier": "^2.8.1"
+      }
+    },
+    "node_modules/prettier-plugin-vue/node_modules/prettier": {
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/rfdc": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.3.1.tgz",
@@ -1511,12 +1797,51 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/svelte": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.1.2.tgz",
+      "integrity": "sha512-IovgkB3eQq0CdqQB1rd1F4SZbg8Z7VBSbAqhD2eE9t8l0KfJXZ/iHmfqnW5pxs5Lr89/cpIZTLU5buemsydYRw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@ampproject/remapping": "^2.3.0",
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@types/estree": "^1.0.5",
+        "acorn": "^8.12.1",
+        "acorn-typescript": "^1.4.13",
+        "aria-query": "^5.3.1",
+        "axobject-query": "^4.1.0",
+        "esm-env": "^1.0.0",
+        "esrap": "^1.2.2",
+        "is-reference": "^3.0.2",
+        "locate-character": "^3.0.0",
+        "magic-string": "^0.30.11",
+        "zimmerframe": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/tabbable": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
       "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
       "dev": true
     },
+    "node_modules/typescript": {
+      "version": "5.6.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
+      "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
+      "dev": true,
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
     "node_modules/vite": {
       "version": "5.4.8",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.8.tgz",
@@ -1645,6 +1970,13 @@
           "optional": true
         }
       }
+    },
+    "node_modules/zimmerframe": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz",
+      "integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==",
+      "dev": true,
+      "peer": true
     }
   }
 }
diff --git a/docs/package.json b/docs/package.json
index 48b5e61..1b978f0 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -2,10 +2,17 @@
   "scripts": {
     "docs:dev": "vitepress dev",
     "docs:build": "vitepress build",
-    "docs:preview": "vitepress preview"
+    "docs:preview": "vitepress preview",
+    "format:ci": "prettier --check .",
+    "format": "prettier --write ."
   },
   "devDependencies": {
     "markdown-it-container": "^4.0.0",
+    "prettier": "^3.3.3",
+    "prettier-plugin-organize-imports": "^4.1.0",
+    "prettier-plugin-svelte": "^3.2.7",
+    "prettier-plugin-tailwindcss": "^0.6.8",
+    "prettier-plugin-vue": "^1.1.6",
     "vitepress": "^1.2.2",
     "vitepress-plugin-tabs": "^0.5.0",
     "vue": "^3.4.27"
diff --git a/docs/prettier.config.js b/docs/prettier.config.js
new file mode 100644
index 0000000..a39c95a
--- /dev/null
+++ b/docs/prettier.config.js
@@ -0,0 +1,20 @@
+module.exports = {
+  printWidth: 80,
+  semi: false,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'all',
+  plugins: [
+    'prettier-plugin-svelte',
+    'prettier-plugin-organize-imports',
+    'prettier-plugin-tailwindcss',
+  ],
+  // overrides: [
+  //   {
+  //     files: '*.svelte',
+  //     options: {
+  //       parser: 'svelte',
+  //     },
+  //   },
+  // ],
+}