Level 67
@successdav Does this still happen if you remove the layout: Layout, line?
Jul 24, 2022
7
Level 4
Vue Composition Api
in Vue options api I can set my layout like this
export default {
layout: Layout,
}
in composition api it breaks my code. the page doesn't render. Here's the code from the page below
<script setup>
import BreezeGuestLayout from '@/Layouts/Guest.vue';
import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
layout: Layout,
defineProps({
canResetPassword: Boolean,
status: String,
});
const form = useForm({
email: '',
password: '',
remember: false
});
const submit = () => {
form.post(route('login'), {
onFinish: () => form.reset('password'),
});
};
</script>
I get this error in the console Uncaught (in promise) ReferenceError: defineProps is not defined
Level 4
@fylzero No if I remove layout: Layout, everything works fine.
Level 67
@successdav Maybe remove the comma from that line? That line does not look like it will parse correctly / is not terminated. I believe that's your issue. Not the defineProps error that is showing up.
Level 30
I'm not sure if that is possible using the Composition API. However, you can always nest your template inside your Layout component.
<template>
<Layout>
...
</Layout>
</template>
Since you're using Inertia, you can also set the layout when resolving pages like so:
createInertiaApp({
resolve: name => {
const page = require(`./Pages/${name}`).default
page.layout = Layout
return page
}
})
2 likes
Level 4
@ramonrietdijk Yes. I have a default layout already setup. This very page needs to look different. So I setup its own layout it.
Level 30
@successdav In that case you could do something like this
createInertiaApp({
resolve: name => {
const page = require(`./Pages/${name}`).default
if (name.startsWith('Public/')) {
page.layout = DifferentLayout
} else {
page.layout = Layout
}
return page
}
})
Reference: Default layouts
1 like
Level 28
You can use both a <script> and a <script setup> section. The regular <script> can be used for things that are not achievable (or easily achievable) using the <script setup> approach, such as defining things like your component's name and inheritAttrs properties. In your case, it could be use to define your layout property.
1 like
Please or to participate in this conversation.