[Vuejs]-Laraval Breeze: page or props is not defined in Vue component

by

0👍

If I’m not wrong, the problem here is how you use the $page object.

The $page object can only be used inside the <template></template> just like the $props, $attrs or $data in vue:

<template>
    {{ $page.props.languages }}
</template>

If you want to access the content of $page inside the <script setup></script> you need to use the usePage().

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

const languages = usePage().props.languages
</script>

you can also explicitly declare the data you pass from the controller as a props

<script setup >
defineProps({
    languages: Object,
    sections: Object,
    sectionBlocks: Object,
    blockFields: Object,
})
</script>

<template>
    {{ languages }}
</template>

Controller Data using defineProps

How to properly use the $page object

Leave a comment