<script setup>不支持设置组件的layout。Inertia也不提供API来从<script setup>执行此操作。
您仍然可以为该选项声明一个<script>块，与<script setup>一起：

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

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

<script setup>
⋮
</script>

字符串

如果您或您的工具不喜欢有两个脚本标记，您可以尝试此webpack插件，它添加了一个宏，允许您在<script setup>中使用Options API
https://github.com/sxzz/unplugin-vue-define-options
在Inertia.js布局的情况下，它看起来像这样：

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

字符串

布局是Nuxt特性（不是普通的Vue）。正如官方Nuxt guide所述，正确的方法是使用definePageMeta util。

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

字符串
第二种选择（在官方文档中也有说明）是使用NuxtLayout组件 Package 页面。

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

型

是的，你可以在Vue 3的标签中使用InertiaJS的layout属性。下面是一个例子：

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

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

export default InertiaPage;
</script>

字符串
在本例中，我们导入了Layout组件，并将其用作InertiaPage组件的layout属性的值。我们还使用了defineComponent函数来定义组件选项。
请注意，此示例假设您已经安装了InertiaJS并设置了项目以使用它。

在vue中使用layout是nuxt特有的。Nuxt在其第3版（本文发布时的演示版）中提供了组合API支持。如果你想使用layout和脚本设置，你应该切换到nuxt 3。如果你没有使用Nuxt，你可以查看vue-router子路由来使用vue创建一个简单的layout逻辑。