CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentnuxt.js
Marco Jacobs
Marco Jacobs

Reputation: 17

NuxtJS| load component in header component

I'm currently busy creating a NuxtJS app. In this app I have a header with a header component which is working as intended. But I want to add a feature for my sub pages. The header always has the same style but the content should be different. How would I be able to load the correct content component in my header component based on the page? For example like this my nuxtjs structure is as follows:

pages/index.vue:

<template>
    <div>
        <Header/>
    </div>
</template>

<script>
    import Header from '~/components/Header.vue';

    export default {
        components: {
            Header
        }
    }
</script>

` This should load my header.vue with the content for the homepage so for example my /components/header.vue should look something like this:

<template>
    <div>
        <header class="hero is-fullheight">
            <div class="hero-head has-background-white">
                <Menu />
            </div>
            <div class="hero-body">
                <div class="container fluid">
                    <HomepageContent />
                </div>
            </div>
        </header>
    </div>
</template>

<script>
    import Menu from '~/components/header/Menu.vue';
    import HomepageContent from '~/components/header/HomepageContent.vue';

    export default {
        components: {
            Menu,
            HomepageContent
        }
    }
</script>

<style lang="scss" scoped>
    .hero {
        background-size:cover;
        position:relative;
    }
</style>

As you can see it should load the component homepageContent. But when I load my header.vue from a subpage, for example 'about-me' it should load the component AboutMeContent.vue

I have been on this problem for a few hours now and I can't find a useful solution to this. Anybody here who would be able to help me?

Thanks.

Upvotes: 1

Views: 1684

Answers (2)

Aldarund
Aldarund

Reputation: 17621

You are looking for slots. Docs can be found here

Example

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

<base-layout>
  <template slot="header">
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template slot="footer">
    <p>Here's some contact info</p>
  </template>
</base-layout>

Upvotes: 1

Vernon Jian Hao
Vernon Jian Hao

Reputation: 86

Is your HomepageContent loaded ?
If not, your '~/components/header/HomepageContent/vue' should be '~/components/header/HomepageContent.vue'

Upvotes: 1

Related Questions