How to use Persistent Layouts with Inertia and Vue 3 Setup Script Syntax

under Vue

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: CustomLayout
10}
11</script>
12 
13<script setup>
14// Normal component JS can go here
15</script>

Thanks for reading this article!

Hopefully you found this article useful! If you did, share it on Twitter!

Found an issue with the article? Submit your edits against the repository.