@alnahian2003

The only file that I have a computed property for in this project is Layout.vue in order to display the logged in (authorized) user's name.

<script setup>
import { computed } from 'vue'
import { usePage } from '@inertiajs/vue3'

import Nav from './Nav.vue'

const name = computed(() => usePage().props.auth.user.name)
</script>

<template>
    <Head>
        <title>My App</title>
    </Head>

    <section class="p-6 bg-gray-200">
        <header class="flex justify-between">
            <div class="flex items-center">
                <h1 class="font-bold text-lg">
                    My App
                </h1>

                <p class="text-sm ml-4">
                    Welcome Back, {{ name }}
                </p>
            </div>

            <Nav />
        </header>
    </section>

    <section class="p-6">
        <div>
            <slot />
        </div>
    </section>
</template>

Basically in Vue 3 with the Composition API, instead of:

<script>
export default {
  computed: {
    someFunction() {
	  // do something	
    }

	anotherFunction() {
      // do something else
    }
  }
}
</script>

computed is imported from vue and computed properties become arrow functions that are assigned to variables to be used within our templates like so:

<script setup>
import { computed } from 'vue'

const someFunction = computed(() => {
  // do something
})
</script>

Link to simplified usePage in Inertia docs

Link to Vue 3 with Compostion API - Computed Properties docs

Hope this helps.

Persistent Layouts