When two pages use a different layout, the property transition has no effect. I could use the default layout for all my pages and replicate the secondary navigation component on each page but in that case, first it's repetitive and secondly, the transition applies to the same component on each page (which is normal since the transition is applied to the outer element) whereas I don't want it to be animated.

I also tried with slots but it works only for nested components of a single layout, not with layout inheritance. You can't have two layouts inheriting from one single layout with slots.

Proposal

layouts/default.vue

<template>
  <div>
    <nuxt-section name="nav">
      <nav class="primary-nav">
        ...
      </nav>
    </nuxt-section>

    <nuxt/>

  </div>
</template>

layouts/shapes.vue

<template>
  <div>
    <nuxt-section name="nav">

      <nuxt-parent/>

      <nav class="secondary-nav">
        <nuxt-link to="/shapes/squares">Squares</nuxt-link>
        <nuxt-link to="/shapes/ovals">Ovals</nuxt-link>
      </nav>
    </nuxt-section>

    <nuxt/>

  </div>
</template>

<script>
export default {
  extends: 'default'
}
</script>

pages/shapes/squares.vue

<template>
  <h1>Squares</h1>
</template>

<script>
export default {
  layout: 'shapes'
}
</script>

pages/shapes/ovals.vue

<template>
  <h1>Ovals</h1>
</template>

<script>
export default {
  layout: 'shapes'
}
</script>

This would become:

/shapes/squares

<div>
  <nav class="primary-nav">
    ...
  </nav>
  <nav class="secondary-nav">
    <a href="/shapes/squares">Squares</a>
    <a href="/shapes/ovals">Ovals</a>
  </nav>
  <h1>Squares</h1>
</div>

/shapes/ovals

<div>
  <nav class="primary-nav">
    ...
  </nav>
  <nav class="secondary-nav">
    <a href="/shapes/squares">Squares</a>
    <a href="/shapes/ovals">Ovals</a>
  </nav>
  <h1>Ovals</h1>
</div>

What do you think? Do you plan to support layout inheritance in a near future. This would be very helpful.