Owen Conti

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

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: 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!

Share this post Follow @owenconti

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