Support persistent layouts in Vue 3's setup sugar

[innocenzi]

When using the setup sugar (RFC), we can't use persistent layouts, because there is no way to set a property (layout in our case) on the instance.

The only workaround I have right now is to abuse defineProps, which is used by the compiler:

<script setup lang="ts">
import layout from '@/views/layouts/main.vue'
import { defineProps } from 'vue'

defineProps({ layout })
</script>

With this, I have to update resolveComponent and I can use persistent layouts:

createApp({
	render: () => h(app, {
		initialPage: JSON.parse(root.dataset.page!),
		resolveComponent: async(name: string) => {
			const { default: component } = (await import(`../views/pages/${name}.vue`))
			component.layout ??= component.props?.layout

			return component
		},
	}),
}).use(inertia).mount(root)

That's obviously an ugly workaround, and I'd like to be able to have a normal resolveComponent and having this kind of page component:

<script setup lang="ts">
import layout from '@/views/layouts/main.vue'
import { defineLayout } from '@inertiajs/inertia-vue3'

defineLayout(layout)
</script>

I can't see how to do that yet though. We can't even implement the ugly workaround by having a very specific property name, because defineProps is only available inside the <script setup> block, it can't be abstracted away, since the compiler specifically looks for it (ie. you don't actually need to import { defineProps } from 'vue').

[reinink]

Very interesting. Thanks for digging into this @innocenzi. We'll definitely want to solve this in a nice way, because <script setup> is awesome. 👍

[innocenzi]

This is probably fixed with https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md#exposing-components-public-interface now 👍

---

Looks like this works:

But this doesn't:

EDIT - The compiler warning is just my outdated @vue/compiler-sfc, but after an update it still does not work.

[innocenzi]

Okay, so I re-read the RFC and actually defineExpose is not made for that - it's for usage with template refs. So with Inertia we'll have to use a new <script> with a default export, or the defineProps hack.

Read: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md#usage-alongside-normal-script

[innocenzi]

So, TL;DR:

Normal way

With that, no need to modify resolveComponent.

With lazy-loading

Shorter syntax

[reinink]

Awesome, thanks for figuring this out @innocenzi!

[xiCO2k]

Any update on having a defineLayout from the @inertiajs/inertia-vue3?

Thanks

[innocenzi]

As far as I know, this cannot happen without a PR to Vue.

[xiCO2k]

@innocenzi That's a bummer. I have the workaround you suggested, but does not look clean anymore.

[innocenzi]

Yep. If you are using Vite, you can easily preprocess your SFCs to have a cleaner solution though. https://twitter.com/enzoinnocenzi/status/1443171187190808578?t=RQF8dpZAllByFubIYN-nmQ&s=19

[xiCO2k]

I'm using laravel-mix, but since its a new project I may try vite. Thanks a lot

[innocenzi]

Another update, which Laravel Mix users can take advantage of, this time! https://twitter.com/enzoinnocenzi/status/1494177242074828803