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

user_18260000 0
Viewed 90

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 class="row">
    <div class="col-2">
      <div class="row">
        <div class="col">
          Navigation
        </div>
      </div>
    </div>
    <div class="col-8"> <!-- I need this div in index.vue -->
      <div class="row">
        <div class="col"><WelcomeText></WelcomeText></div>
      </div>
      <div class="row">
        <div class="col">Card 1</div>
        <div class="col">Card 2</div>
        <div class="col">Card 3</div>
      </div>
    </div>
    <div class="col-2">
      <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 class="col-8"> 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!

css-grid nuxt.js vuetify.js vue.js css
1 Answers

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 class="row">
        <div class="col-2">
            <div class="row">
                <div class="col"> Navigation </div>
            </div>
        </div>
        <div class="col-8">
            <!-- I need this div in index.vue -->
            <Nuxt />
            <div class="row">
                <div class="col">Card 1</div>
                <div class="col">Card 2</div>
                <div class="col">Card 3</div>
            </div>
        </div>
        <div class="col-2">
            <CompanyCard></CompanyCard>
        </div>
    </div>
</template>

now inide your index.vue add:

<template>
    <div class="row">
        <div class="col"><WelcomeText></WelcomeText></div>
    </div>
</template>
user_112615180
Related