Usually in vue 2, you render a component that doesn't close on route change, you include it directly in your app.vu file. How do I achieve this in nuxt 2.
I am trying to implement a chat module and don't want to include the component on every instance it is needed (That will mean new socket connection on every route)
Is there a workaround?
Put that in your default layout, it should be enough.
More info here: https://nuxtjs.org/docs/concepts/views/#default-layout
Something like this in /layouts/default.vue
<template>
<div>
<nav>
<ul>
<li>
<NuxtLink to="/">Home</NuxtLink>
</li>
<li>
<NuxtLink to="/parent">Parent</NuxtLink>
</li>
</ul>
</nav>
<main>
<img src="~/assets/logo.svg" />
<Nuxt />
</main>
</div>
</template>
And a simple page should do it
<template>
<div>
<h1>Hello Nuxters! 👋</h1>
</div>
</template>
No need to define a specific layout here since default is the one used by default.
Codesandbox example available here: https://nuxtjs.org/examples/routing/nested-pages
Otherwise, you could indeed have your content nested inside of a main parent wrapper.