Maintain grid system across `default.vue` and `index.vue` in vuetify-CodePudding

I am very new to vue, this probably is very basic question. I want a page with 3-col layout, where two columns should be in default.vue and the one column should be in a page, say index.vue. I have created everything in default.vue and it works fine but I can not maintain that when I move the content to index.vue file. Here is overview of what I have:

<html>
 <body>  
  <div >
    <div >
      <div >
        <div >
          Navigation
        </div>
      </div>
    </div>
    <div > <!-- I need this div in index.vue -->
      <div >
        <div ><WelcomeText></WelcomeText></div>
      </div>
      <div >
        <div >Card 1</div>
        <div >Card 2</div>
        <div >Card 3</div>
      </div>
    </div>
    <div >
      <CompanyCard></CompanyCard>
    </div>
  </div>
</body>
</html>

Here, if I move the whole div including col-8 to index.vue then CompanyCard moves to left near the Navigation and the main div goes below that. On the other had, if I just keep the line <div > in default.vue and move the content (2 rows inside this) to index.vue. The CompanyCard remains at right, as it should but the middle column is blank and the content is below that. How do I maintain that 3-col format across default.vue and index.vue ?

I am using Nuxt with Vuetify.

Thank you!

CodePudding user response：

If you're using Nuxt then you should use <Nuxt /> component inside defualt.vue. this will include the page component you can check nuxt layout docs

example for default.vue:

<template>
    <div >
        <div >
            <div >
                <div > Navigation </div>
            </div>
        </div>
        <div >
            <!-- I need this div in index.vue -->
            <Nuxt />
            <div >
                <div >Card 1</div>
                <div >Card 2</div>
                <div >Card 3</div>
            </div>
        </div>
        <div >
            <CompanyCard></CompanyCard>
        </div>
    </div>
</template>

now inide your index.vue add:

<template>
    <div >
        <div ><WelcomeText></WelcomeText></div>
    </div>
</template>