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

Wartburg

What you mean with layout property of inertiajs? – Lutz

@Lutz I think the OP is referring to Inertia page layouts. – Chemisorption

Answer 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>

Chemisorption

Is there a way to have multiple slots when using this method? Im looking to have addition optional named slots that pages can somehow populate – Stichous

While it is a working solution, it is still from a very early stage. Instead, use the defineOptions mentioned in @BrianOrtiz's answer, which has already been integrated into Vue beyond his answer: blog.vuejs.org/posts/vue-3-3 – Rieth

Answer 2

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>

Remonaremonetize

Best answer to this question. Starting from Vue 3.3, there is no need for the addon. This useful integration has been built into the core. So, just update Vue to a version higher than 3.3 and freely use the defineOptions without another package. – Rieth

Answer 3

Using layouts in Vue is specific to Nuxt. Nuxt introduces Composition API support with its third version (as of the date of this article, it is in demo version). If you want to use layouts with the script setup, you should switch to Nuxt 3. If you are not using Nuxt, you can explore Vue Router child routes to create a simple layout logic with Vue.

Hiatt

Answer 4

Layouts are Nuxt feature (not plain Vue). As stated in official Nuxt guide, the proper approach is to use definePageMeta util.

<script setup lang="ts">
definePageMeta({
  layout: 'custom'
})
</script>

Second option (also stated in official docs) is to wrap your page with NuxtLayout component.

<nuxt-layout name="custom">
 <your-beatiful-page />
</nuxt-layout>

Laurentium

Answer 5

Yes, you can use the layout property of InertiaJS in the tag of Vue 3. Here's an example:

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

const InertiaPage = defineComponent({
  layout: Layout,
  // other component options
});

export default InertiaPage;
</script>

In this example, we're importing the Layout component and using it as the value for the layout property of the InertiaPage component. We're also using the defineComponent function to define the component options.

Note that this example assumes that you have already installed InertiaJS and set up your project to use it.

Zircon