Is it possible to change content of layout thought props? - vue.js

Question

I have that layout:
<template>
...navigation for all pages..
<h1>content for X??</h1>
<slot />
...footer for all pages...
</template>
For pages/index.vue:
<template>
index is here ok :)
</template>
and pages/about.vue:
<template>
about is here ok :)
</template>
I wish I could render h1 in layout for different pages and not print same text for all.
I know I can move h1 from layout to pages and edit each page.
But there are a lot of content between h1 and slot and I just want to change text.

Answer 1

There would be many ways of achieving what you are asking but the simplest would be the usage of named slots.
In the vue documentation (please take some time digging into it, the amount of deftail and explanation available is very appreciable) :
The <slot> element has a special attribute, name, which can be used to assign a unique ID to different slots so you can determine where content should be rendered.
The process of using named slots in the nuxt layouts is documented in the nuxt layout documentation.
You could create a TitleLayout.vue component in the layouts folder of your nuxt project that would look like this:
<!-- layouts/TitleLayout.vue -->
<template>
<div>
<nav>
<nuxt-link to="/"> index </nuxt-link>
<nuxt-link to="about"> about </nuxt-link>
</nav>
<main>
<h1>
<slot name="heading">
a default title
</slot>
</h1>
<slot/>
</main>
</div>
</template>
and that you could use it like this in your pages/About.vue (or in any other page)
<!-- pages/About.vue -->
<template>
<div>
<NuxtLayout name="with-title">
<template #heading> Hello from the about title </template>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam eius
rem, sit repellendus reiciendis explicabo? Dolorum totam molestias
adipisci cupiditate distinctio, libero dolorem iusto, quidem esse
excepturi voluptatem repellendus facere.
</NuxtLayout>
</div>
</template>
<script setup>
definePageMeta({
layout: false,
});
</script>