The functionality described in the code snippet below is quite straightforward. When a user visits the /blog route, the layout is switched to the blog layout which has a different header style. Similarly, the homepage has its own unique header style. However, when using NuxtLink, the page layout styles do not update automatically unless the page is manually refreshed each time.
There are two distinct layouts:
default.vue
<template>
<AppHeader />
<slot />
</template>
<style>
.header-wrapper {
background: red;
}
</style>
and the other layout
blog.vue
<template>
<AppHeader />
<slot />
</template>
<style>
.header-wrapper {
background: blue;
}
</style>
Within the pages directory, there exist two pages:
index.vue
<script setup>
definePageMeta({
layout: 'default'
})
</script>
<template>
<div>
<h1>this is the homepage</h1>
<NuxtLink to="/blog">Blog</NuxtLink>
</div>
</template>
and blog.vue
<script setup>
definePageMeta({
layout: 'blog'
})
</script>
<template>
<div>
<h1>this is the blog page</h1>
<NuxtLink to="/">Homepage</NuxtLink>
</div>
</template>