CODEWITHSUNDEEP
cssvue.jsnuxt.jsvuetify.jscss-grid
purple monkey
purple monkey

Reputation: 57

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

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!

Upvotes: 3

Views: 191

Answers (1)

Kareem Dabbeet
Kareem Dabbeet

Reputation: 3994

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>

Upvotes: 1

Related Questions