[Vuejs]-Is it possible to change content of layout thought props?

by

0👍

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>

Leave a comment