Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to pass layout to vue component with setup script

LayoutComponent

    <template>
      //some code here ...
      <div>
        <slot></slot>
      </div>
    </template>

In composition api you can pass a a layout by importing it and passing it into the layout option of defineComponent

<script lang="ts">
import {defineComponent} from 'vue'
import LayoutComponent from '@/path/to/component'
           ☝️
export default defineComponent({
  layout: LayoutComponent
  //...        ☝️
  

What would be the equivalent of this in a setup script? Thank you in advance :)

<script setup lang="ts">
import LayoutComponent from '@/path/to/component
// ???
like image 554
Abeldlp Avatar asked Oct 20 '25 02:10

Abeldlp


1 Answers

I realized that you can wrap the entire component with the layout component.

<script setup lang="ts">
import LayoutComponet form '@/path/to/component'
</script>
<template>
  <LayoutComponent>
    <p>Component wrapped in a layout</p>
  </LayoutComponent>
</template>

I don't delete this question in case someone finds this useful :)

like image 160
Abeldlp Avatar answered Oct 21 '25 15:10

Abeldlp