Uncaught (in promise) ReferenceError: $page is not defined

Question

What I want to achieve

I have a project using Laravel + InertiaJS/VueJS 3. In it, there is an edit form that should display the content of $page.props.profile_name if the value is not empty or the string profile_name if the value is non-existent.

The bug message from the browser's console

Uncaught (in promise) ReferenceError: $page is not defined

When I see this message, the content of my component is not visible in the interface.

My VueJS 3 Code

<template>
    <form @submit.prevent="submit">
        <input id="profile_name" v-model="form.profile_name" />

        <input id="description" v-model="form.description" />

        <button type="submit">Submit</button>
    </form>
</template>

<script setup>
    import { useForm } from '@inertiajs/vue3';
    import { router } from '@inertiajs/vue3';

    const form = useForm({
        profile_name: $page.props.profile_name || 'profile_name',
        description: $page.props.description || 'description',
    });

    function submit() {
        router.post('/members', form);
    }
</script>

How I can solve the issue for now

The code works fine, but with hard-coded content, if I replace the form constant this way. I would prefer to get my content from $page.props.profile_name as soon as $page.props.profile_name is not empty.

const form = useForm({
    profile_name: 'profile_name',
    description: 'description',
});

$page is a global variable used with Vue 2 syntax. most libraries that have migrated from Vue 2 to Vue 3 have replaced globals with composables. Check out the inertiajs documentation and the "Vue 3" tab which shows how you should utilize the usePage composable instead of $page — yoduh
– yoduh, Commented Jun 11, 2023 at 18:23

erlango3 · Accepted Answer · 2023-06-13 23:33:20Z

I originally posted the answer within the question, but it was removed by a proofreader. Credits to yoduh for his answer. And thanks to efecdml for taking part in the discussion.

<template>
    <form @submit.prevent="submit">
        <input id="profile_name" :placeholder="$page.props.profile_name || 'profile_name'" v-model="form.profile_name" />

        <input id="description" :placeholder="$page.props.description || 'description'" v-model="form.description" />

        <button type="submit">Submit</button>
    </form>
</template>

<script>
    import { useForm } from '@inertiajs/vue3';
    import { router } from '@inertiajs/vue3';
    import { usePage } from '@inertiajs/vue3';

    export default {
        name: 'MyComponent',
        setup() {
            const page = usePage();

            const form = useForm({
                profile_name: page.props.profile_name || 'profile_name',
                description: page.props.description || 'description',
            });

            function submit() {
                router.post('/members', form);
            }

            return {
                form,
                submit,
            };
        },
    };
</script>

efecdml · Accepted Answer · 2023-06-11 18:40:39Z

0

I know like referencing elements from DOM to setup is not like that in Composition API and didn't get the whole point of this code. Though this is the method comes to my mind right now:

<template>
  <form @submit.prevent="submit">
    <input id="profile_name" v-model="form.profile_name"/>

    <input id="description" v-model="form.description"/>

    <button type="submit">Submit</button>
  </form>
</template>

<script setup>
import { router } from '@inertiajs/vue3';
import {ref} from "vue";

const form = ref({
  "profile_name":"",
  "description":""
})

function submit() {
  router.post('/members', form);
}
</script>

I didn't get the submit() method at the moment.

answered Jun 11, 2023 at 18:40

efecdml

361 silver badge3 bronze badges

Collectives™ on Stack Overflow

Uncaught (in promise) ReferenceError: $page is not defined

What I want to achieve

The bug message from the browser's console

My VueJS 3 Code

How I can solve the issue for now

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

What I want to achieve

The bug message from the browser's console

My VueJS 3 Code

How I can solve the issue for now

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related