Using layout property in <script setup> tag

Question

Is there any way to use layout property of inertiajs for vue 3 in <script setup> tag?

In other words, I am asking for an equivalent of the following code,

<script>
import from "../Shared/Layout";

export default {
   layout: Layout;
};
</script>

when the tag is the vue 3 <script setup>

Thank you

Answer 1

If you or your tooling doesn't like there being two script tags, you can try this plugin for webpack that adds a macro that lets you use the Options API in your <script setup>

https://github.com/sxzz/unplugin-vue-define-options

In the case of Inertia.js layouts, it would look like this:

<script setup>
  import AppLayout from '@/Layouts/AppLayout';
  defineOptions({
    layout: AppLayout,
  });
</script>