Nuxt.js: How to add component to root instance (outside main router-view)

[chasebank]

I have need for adding a component in the main instance outside of the main <router-view>. The use-case is an element (global navigation, in my case) that needs to not re-load on route/layout change due to styling requirements.

A 'normal' Vue implementation would look like

<div id="app">
  <Navigation/>
  <router-view></router-view>
</div>

It seems like issue #1 (super ironic...) and this video are what I'm looking for, although that doesn't appear to be working in 1.0

I've tried adding app.vue in layouts (per the video description), with

<template>
  <nuxt-container>
    <h2>Test</h2>
    <nuxt/>
  </nuxt-container>
</template>

But that seems to get ignored altogether.

Thanks for any help!

_{This question is available on Nuxt.js community (#c2265)}

[Oliboy50]

Hello,

I think what you're looking for are layouts, even if it seems that you already tried.

Have you tried to use the simple layouts example here https://nuxtjs.org/examples/layouts ?

I confirm that layouts worked (at least using v1.0.0-RC11)

[chasebank]

Hi, thanks for the reply but I don't think normal layouts will work here, unless there's some way to extend the root instance in them (like issue #1 suggests).

I need this component to not reload when layouts change.

As far as I can tell, everything inside a layout component re-loads, including anything outside the <nuxt/> element.

So, extending the example, if I have an Index page with default layout:

<template>
  <div>
    <Navigation/>
    <img src="logo.png"/>
    <nuxt/>
  </div>
</template>

and About page with dark layout:

<template>
  <div class="dark">
    <Navigation/>
    <nuxt/>
  </div>
</template>

Correct me if I'm wrong, but that Navigation component is going to get remounted when the route changes. I need it to be outside of the routes.

[Al-Rozhkov]

I think your Navigation component will stay, if you use <nuxt-link to="/path">Link</nuxt-link> for your navigation links.

[chasebank]

Hey, thanks for the suggestion.

Here's a live example (and code) that shows the component getting re-mounted, if you check console, even when using path links.

The use case for what I'm talking about is the first example found in the vue-router Getting Started docs. This seems to be a pretty standard router setup.

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- use router-link component for navigation. -->
    <!-- specify the link by passing the `to` prop. -->
    <!-- `<router-link>` will be rendered as an `<a>` tag by default -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- route outlet -->
  <!-- component matched by the route will render here -->
  <router-view></router-view>
</div>

In that example, page components are rendered inside <router-view></router-view>, and everything outside will not get re-mounted when the route changes. Just like how nested routes work, except we're talking about the main route...

Everything inside a layout is inside that route-view, and get's re-mounted when the route changes (unless the new route shares the same layout). I need to get access to what's outside the main route-view

[chasebank]

Since the previously mentioned video has now been unlisted from YouTube, I'm going to go ahead and assume this isn't possible.? That's a real shame if ture... it seems simple but I probably won't be using Nuxt for the most part, without this ability.

Unless someone can point me toward a solution? I'd like to convert this into a feature request.

Again, the use case is mounting a Vue component (with html, logic and scoped styling) into the main Vue instance, outside of the main router-view, just as my previous example referenced form the Vue Router docs.

This will allow that component to remain static (and not get duplicated) during page and layout transitions.

It seems like maybe this could be achieved with plugins, but I haven't found a way. Or, alternatively, like the YouTube video, an app.vue or nuxt.vue file that lets you extend/override the main instance that's generated by Nuxt.

[chasebank]

This issue was originally under a support context. Now that I've a better idea what's going on, I'm going to close and re-open a fresh one contexted toward a feature request

[davidbwaters]

Maybe consider Ream https://github.com/ream/ream/blob/master/docs/guides/root-component.md. At the of this issue bottom is a fairly recent comparison https://github.com/ream/ream/issues/23#5.

[chasebank]

Awesome! Thanks for that heads up, I hadn't heard of Ream

Nuxt has me confused. It seems amazing in concept and execution, and is spot-on perfect for many use cases. But personally I keep finding myself fighting against it. At first glance Ream seems the perfect middle ground when we need a little more control.

I'm ironically having trouble implementing the it's root component, so far... but I'll handle that over there

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.