Using persistent layouts with composition api and <script setup> tag

[rrrrando]

Hi!

I'm playing around with the new <script setup> tag in composition api. But i can't figure out how to create a persistent layout. Has anyone got it working?

[rrrrando]

I read the RFC and figured it out. The solution is to just add a normal script tag like so :

//Everything in here will be exposed to template
<script setup>
import Component from './ExampleCompoenent':

const item = "Some Vue stuff";
</script>
// Add a second script tag and export the layout
<script>
export default { layout: BlogLayout }
</script>

<template>
   <p>Some content here! {{ item }}</p>
</template>

[Fuad2Dev]

If you're using Vue 2.7 or Vue 3, you can alternatively use the defineOptions plugin to define a layout within <script setup>:

<script setup>
import Layout from './Layout'

defineOptions({ layout: Layout })
</script>