Issue: I seem to have my layout wrapped in my layout trying to override App.vue...

So, maybe not a bug, probably me, but not sure…

Trying to override App.vue to add route transitions, but I’m getting a double layout situation going on…I’m going off of the tutorial that you just published, but it does not seem to be working properly. Here is a screen shot:

…and you can see that my layout has another layout inside of it, and I don’t know how to remedy this situation.

Here is my code. First, the App.vue file:

<template>
  <MainLayout>
    <transition name="fade">
      <router-view />
    </transition>
  </MainLayout>
</template>

<static-query>
query App {
  metadata {
    siteName
    siteDescription
  }
}
</static-query>

<script>
import MainLayout from '~/layouts/Main.vue'

export default {
  components: {
    MainLayout
  },
  metaInfo() {
    return {
      title: this.$static.metadata.siteName,
      meta: [
        {
          key: 'description',
          name: 'description',
          content: this.$static.metadata.siteDescription
        }
      ]
    }
  }
}
</script>

<style>

/*----------------------------------------------------------------
Transition Styles
----------------------------------------------------------------*/

.fade-enter-active, .fade-leave-active {
  transition-property: opacity;
  transition-duration: 0.25s;
}

.fade-enter-active {
  transition-delay: 0.25s;
}

.fade-enter, .fade-leave-active {
  opacity: 0
}

</style>

…and my layout file, which is called Main.vue:

<template>
  <div>
    <header>
      <g-link class="nav__link" to="/">Home</g-link>
      <g-link class="nav__link" to="/about/">About</g-link>
    </header>
    <main>
    <slot /> <!-- Page content will be inserted here  -->
    </main>
    <footer>
      <p>Hello People</p>
    </footer>
  </div>
</template>

<style scoped>

div {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-rows: 10vh 80vh 10vh;
  grid-template-columns: 100vw;
}

header {
  grid-row: 1;
  background-color: rgb(220,220,220);
}

main {
  grid-row: 2;
  background-color: rgb(200,200,200);;
}

footer {
  grid-row: 3;
  background-color: rgb(220,220,220);;
}

</style>

Any thoughts or pointers would be much appreciated. Thank you 😃

[hjvedvik]

@rchrdnsh The src/pages/Index.vue file is probably also wrapped in a layout component.

[tomtev]

You should not import any layout to App.vue 😃 You should use it as a wrapper for all other layouts. So the stuff you have in Main.vue should go in App.vue if you want it on all pages.