Nuxt•8mo ago•

5 replies

Using a slot on a "global" component

I have a component (

<page-header>

<page-header>

) that displays a Page

title

title

and

subtitle

subtitle

on all pages of my application.

This component is placed in one of the Layout components of my application so that it is alway visible.

In order to keep the

title

title

and

subtitle

subtitle

updated I have a composable that updates and stores the values.

This works fine for the main content of the component, however on some pages the component also needs to display some extra content, which I was intending to use it's

<slot />

<slot />

to access.

Is there a way to access the slot when I am not directly using the

<page-header>

<page-header>

component?

<script setup lang="ts">
const { title, subtitle } = usePageHeader()
</script>

<template>
  <div class="flex flex-auto top-0 m-4">
    <div class="flex-3">
      <div class="uppercase text-4xl">{{ title }}</div>
      <div class="text-2xl font-light">{{ subtitle }}</div>
    </div>
    <div class="justify-self-end">
      <slot />
    </div>
  </div>
</template>

<script setup lang="ts">
const { title, subtitle } = usePageHeader()
</script>

<template>
  <div class="flex flex-auto top-0 m-4">
    <div class="flex-3">
      <div class="uppercase text-4xl">{{ title }}</div>
      <div class="text-2xl font-light">{{ subtitle }}</div>
    </div>
    <div class="justify-self-end">
      <slot />
    </div>
  </div>
</template>

Nuxt•8mo ago•

5 replies

dankell.

Using a slot on a "global" component

I have a component (

<page-header>

<page-header>

) that displays a Page

title

title

and

subtitle

subtitle

on all pages of my application.

This component is placed in one of the Layout components of my application so that it is alway visible.

In order to keep the

title

title

and

subtitle

subtitle

<slot />

<slot />

to access.

Is there a way to access the slot when I am not directly using the

<page-header>

<page-header>

component?

<script setup lang="ts">
const { title, subtitle } = usePageHeader()
</script>

<template>
  <div class="flex flex-auto top-0 m-4">
    <div class="flex-3">
      <div class="uppercase text-4xl">{{ title }}</div>
      <div class="text-2xl font-light">{{ subtitle }}</div>
    </div>
    <div class="justify-self-end">
      <slot />
    </div>
  </div>
</template>

<script setup lang="ts">
const { title, subtitle } = usePageHeader()
</script>

<template>
  <div class="flex flex-auto top-0 m-4">
    <div class="flex-3">
      <div class="uppercase text-4xl">{{ title }}</div>
      <div class="text-2xl font-light">{{ subtitle }}</div>
    </div>
    <div class="justify-self-end">
      <slot />
    </div>
  </div>
</template>

Using a slot on a "global" component

Similar Threads

Using a slot on a "global" component

Similar Threads

Similar Threads

Similar Threads