I'm working on a simple dashboard. trying to make a sidebar static and just the main section dynamic.

Successfully made the sidebar static but the elements on the new page route of the nuxt link appear under the sidebar instead of the main page section.

PS. I'm using bulma as my CSS framework.

Here's the side bar code.

  <div >
    <div >
      <div >
        <aside >
          <ul >
            <li >
              <NuxtLink to="/dashboard">
                Dashboard
              </NuxtLink>
            </li>
            <li >
              <NuxtLink to="/clients">
                Clients
              </NuxtLink>
            </li>
            <li >
              <NuxtLink to="/projects">
                Projects
              </NuxtLink>
            </li>
            <li >
              <NuxtLink to="/invoice">
                Invoice
              </NuxtLink>
            </li>
            <li >
              <a>Proposal</a>
            </li>
          </ul>
        </aside>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SideBar'
}
</script>

<style scoped>

</style>

And here's the code for one of the pages I'm trying to route to.

  <div>
    <h1>
      Testing Clients
    </h1>
  </div>
</template>

<script>
export default {
  name: 'ClientS',
  layout: 'sidebar'
}
</script>

<style scoped>

</style>

enter image description here

what do I do to make the contents on the pages show up in the main section area instead of under the sidebar?

CodePudding user response：

Include a <Nuxt /> component in the sidebar layout. It indicates where the page's content is loaded. Learn more on it from the docs.

CodePudding user response：

You need to create a layout file named sidebar in the layouts directory. In this file, you can put your sidebar component and <Nuxt/> component as your page content.

This is the simple example:

/layouts/sidebar.vue

<div>
 <Sidebar />
 <div>
   <Nuxt />
 </div>
</div>