CODEWITHSUNDEEP
javascriptvue.jsnuxt.js
Programmeur
Programmeur

Reputation: 1531

Vue: Nuxt: content not showing inside nuxt-child

My page structure is:

pages/
--| music/
-----| index.vue
-----| rock.vue
-----| pop.vue

My file code is:

music/index.vue

<template>
   <div> 
      <nuxt-link :to="localePath('music-rock')">Rock</nuxt-link>
      <nuxt-link :to="localePath('music-pop')">Pop</nuxt-link>
   </div>

   <div>
      <nuxt-child/>
   </div>
</template>

music/rock.vue

<template>
   <div>🎸🎶🤘</div>
</template>

But when on music route and click on Rock link, the page opens entirely with rock.vue content, instead of just inside the nuxt-child element.

What I am doing wrong?

(And how can I set a default route, since it's a tab system?)

Ps: localePath is part of i18n

Upvotes: 1

Views: 1166

Answers (1)

Programmeur
Programmeur

Reputation: 1531

Resolved.

I had to

  • move /music/index.vue to /music.vue
  • create a /music/index.vue with the default content for the nuxt-child

It's working now. 😄

Upvotes: 1

Related Questions