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>
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