vue.jsnuxt.jsrouter

How to render router content onto index.html in Nuxt


I am trying to build an app that only consists of one page (frontal page) and I do all my routing within a div that is nested on main page? I am basically looking for an equivalent of from Vue Router.

How can I change my settings so that the router is being displayed on front page and does not change the whole page by changing the url?

example code:

pages/index.vue

<template>
  <div class="container">
    <div class="panel_container">
      <h1>Left Panel</h1>
    </div>
    <div class="panel_container">
      <h1>Middle Panel</h1>
    </div>
    <div class="panel_container"> 
      <h1>Right Panel</h1>
      <div>
        // router-view goes here
      </div>
    </div>
  </div>
</template>

Solution

  • EDIT: kissu below is totally right, please do not modify .nuxt as it will get overwritten anyway on compile.

    the solution is to organize .nuxt/layouts/default.vue in a particular way:

    <template>
      <YourFirstComponent />
      <Nuxt /> <!-- all routing goes here -->
      <OtherComponent />
    </template>
    

    this way and will always be present on the front page and the rest is being taken care of in