Hybridly

Appearance

defineLayoutProperties ​

This function can be used to define the properties of the currently-defined persistent layout.

RelateddefineLayout
ExperimentalThis function can be changed or removed at any point.

Usage ​

defineLayoutProperties accepts a single argument, an object that contains the layout properties. This function cannot be typed automatically.

vue
<script setup lang="ts">
defineLayoutProperties({ 
  fluid: true
})
</script>

<template layout="main"> 
  <!-- ... -->
</template>
<script setup lang="ts">
defineLayoutProperties({ 
  fluid: true
})
</script>

<template layout="main"> 
  <!-- ... -->
</template>
vue
<script setup lang="ts">
defineProps<{ 
  fluid: boolean
}>()
</script>

<template>
  <main :class="{  
    'w-full': fluid,
    'container mx-auto': !fluid
  }">
    <!-- ... -->
  </main>
</template>
<script setup lang="ts">
defineProps<{ 
  fluid: boolean
}>()
</script>

<template>
  <main :class="{  
    'w-full': fluid,
    'container mx-auto': !fluid
  }">
    <!-- ... -->
  </main>
</template>

The example above uses a layout using the template syntax, and define its properties in its script.