Posted on under Vue by Owen Conti.
There's no obvious way to define Inertia's
layout property on your component when you're using Vue 3's
<script setup> syntax.
Turns out what you need to do is add a second
<script> tag to your component, which does not use the
setup syntax. Instead, you'll export the
layout key as normal:
1<template> 2 // Normal template stuff goes here 3</template> 4 5<script> 6import CustomLayout from '@/layouts/CustomLayout.vue' 7 8export default { 9 layout: CustomLayout10}11</script>12 13<script setup>14// Normal component JS can go here15</script>Hopefully you found this article useful! If you did, share it on X!
Found an issue with the article? Submit your edits against the repository.