'Using layout property in <script setup> tag

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

laravelvue.jsvuejs3inertiajs


Solution 1:[1]

<script setup> doesn't support setting a component's layout. And Inertia doesn't provide an API to do that from <script setup>.

You could still declare a <script> block for that option alongside <script setup>:

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

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

<script setup>
?
</script>

Solution 2:[2]

using layout in vue is specific to nuxt. Nuxt provides composition api support with its 3rd version (demo version as of the date of this article). If you want to use layout with script setup, you should switch to nuxt3. If you're not using Nuxt, you can check out the vue-router child routes to create a simple layout logic with vue.

Solution 3:[3]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Sami Salih ?brahimba?
Solution 3 Brian Ortiz

Related Questions