We Keep Coding

router-link-active Nuxt 3 / VueJS on nested routes not applying to parent

I have created a simple reproduction to better explain myself. I have:
-| pages/
---| test/
------| index.vue
------| nested.vue
And I have a navbar, having read the documentation I assume if I NuxtLink to /test or /test/nested.vue then I would have router-link-active css class applied to both in the navbar but it doesn't seem to do that.
The docs seem to suggest you should be laying out your content as:
-| pages/
---| parent/
------| child.vue
---| parent.vue
I tried that and just doesn't work - the child is never rendered (unless I add another <NuxtPage> to parent.vue which is not what I want since that would show content of parent and child.
Reproduction here: https://stackblitz.com/edit/nuxt-app-config-t3nvjv?file=app.vue
Help would be much appreciated appreciated.

I faced exactly the same issue and finally understood how to use NuxtPage!
You must follow the following structure:
/pages
/posts
[postId].vue
index.vue
posts.vue
In your /posts/index.vue:
<template>
<h1>All posts page</h1>
<p>Whatever...</p>
</template>
In your /posts/[postId].vue:
<template>
<h1>Single post page</h1>
<p>{{ postId }}</p>
</template>
And finally, in your posts.vue:
<template>
<NuxtPage />
</template>
Both your index.vue and [postId].vue content will be rendered separately and your NuxtLinks router-link-active and router-link-exact-active classes will work :)

How do I render a standalone component on NUXT 2 which doesn't destroy on route change

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.

Remove component from template for certain pages in Vue2

I'm working on a Vue2 app.
It consists of a base template (App.vue) that looks like this:
<template>
<v-app>
<div id="app">
<NavigationBar></NavigationBar>
...
</div>
</v-app>
</template>
And various components (i.e., Home.vue, Login.vue, Navigation.vue etc...)
Being part of the main template, the NavigationBar is displayed in each component.
I would love to remove the NavigationBar only in the Login.vue component.
What could be the best way to achieve this?
Thanks

Nuxt, transitions not working for child routes (displayed using NuxtChild)

I'm having trouble getting transitions to work for my child routes.
I have the following pages:
pages/
child/
_id.vue
child.vue
index.vue
Navigating between index and any of the child routes triggers transitions, but when navigating from one child route to another child route there is no transition.
Note that there is a static route /child and dynamic routes for /child/_id. The <nuxt-child /> component is inside child.vue:
<template>
<div class="container">
<h1 class="title">
Child Root Page
</h1>
<nuxt-child />
</div>
</template>
<script>
export default {
key(route) {
return route.fullPath
},
}
</script>
If I remove the static route child.vue and move <nuxt-child /> to index.vue all transitions work, but then I don't have the 'parent' child page anymore.
Is it possible to get the transitions to work in this case?
I have a small repo showing the problem and a github page with the site deployed.

Use animation only on specific page(s) with vue-router

I have a problem with transitions using vue.js. I have a "Login" component that holds my login page. I would like to use an animation name="fade" only on that specific page (component). In my App.vue I have written:
<template>
<div id="app">
<transition name="fade">
<router-view></router-view>
</transition>
</div>
</template>
I understand the problem. This animation applies on all pages inside router-view. Is there any solution to remove transition or even change the transition name to "none" after router-view redirects to another page?
Thank you!