From 8f2936db9c6749587fa845b75c90d7a8c1275a70 Mon Sep 17 00:00:00 2001
From: gribbl <42603119+gribbl@users.noreply.github.com>
Date: Wed, 13 May 2026 09:39:07 +0200
Subject: [PATCH 1/2] docs: add Vue equivalent for Inertia shared props example

Added example for accessing shared data in Vue component using inertia.
---
 content/guides/frontend/inertia.md | 42 ++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/content/guides/frontend/inertia.md b/content/guides/frontend/inertia.md
index 196bb4f..701e06f 100644
--- a/content/guides/frontend/inertia.md
+++ b/content/guides/frontend/inertia.md
@@ -678,6 +678,9 @@ The `share` method may be called before the request passes through all middlewar
 
 Shared data is automatically included in the props for every page. When you define page props using the `InertiaProps` type helper, it includes both your page-specific props and all shared data.
 
+::::tabs
+
+:::tab{title="React"}
 ```tsx title="inertia/pages/posts/index.tsx"
 import { InertiaProps } from '~/types'
 import { Data } from '@generated/data'
@@ -702,6 +705,45 @@ export default function PostsIndex(props: PageProps) {
   )
 }
 ```
+:::
+
+:::tab{title="Vue"}
+```vue title="inertia/pages/posts/index.vue"
+<script setup lang="ts">
+import { computed, watch } from 'vue'
+import { usePage } from '@inertiajs/vue3'
+import { Data } from '@generated/data'
+
+defineProps<{
+  posts: Data.Post[]
+}>()
+
+/**
+ * Access shared data.
+ */
+const page = usePage<Data.SharedProps>()
+
+const user = computed(() => page.props.user)
+
+watch(
+  () => page.props.flash,
+  (flashMessages) => {
+    if (flashMessages.error) {
+      console.log('Error:', flashMessages.error)
+    }
+  },
+  { immediate: true }
+)
+</script>
+
+<template>
+  <p v-if="user">Welcome, {{ user.name }}</p>
+  <!-- render posts -->
+</template>
+```
+:::
+
+::::
 
 ## Pagination
 

From 1f00c86da1c636c7b8f3be60a8e067bed7c3f365 Mon Sep 17 00:00:00 2001
From: gribbl <42603119+gribbl@users.noreply.github.com>
Date: Wed, 13 May 2026 14:00:42 +0200
Subject: [PATCH 2/2] docs: update shared props description to include Vue

---
 content/guides/frontend/inertia.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/guides/frontend/inertia.md b/content/guides/frontend/inertia.md
index 701e06f..007e770 100644
--- a/content/guides/frontend/inertia.md
+++ b/content/guides/frontend/inertia.md
@@ -676,7 +676,7 @@ The `share` method may be called before the request passes through all middlewar
 
 ### Accessing shared data
 
-Shared data is automatically included in the props for every page. When you define page props using the `InertiaProps` type helper, it includes both your page-specific props and all shared data.
+Shared data is automatically included in the props for every page. In React, when you define page props using the `InertiaProps` type helper, it includes both your page-specific props and all shared data. In Vue, use `usePage`.
 
 ::::tabs