vue.jsvuejs2vuetify.js

vuetify.js how to get full width of v-container


I'm new to vuetify.js and started playing around with it.

enter image description here

This is my code.

Admin-panel.vue

<v-content class="yellow">
  <v-container>
    <v-layout>
      <router-view></router-view>
    </v-layout>
  </v-container>
</v-content>

create-user.vue

<template>
    <v-container class="red">
        <v-layout class="blue">
            <v-flex md12>
                form
            </v-flex>
        </v-layout>
    </v-container>
</template>

Here I can see v-container element gets the full width available. What I want is my v-container inside the create-user component to get the that same width. (Yellow will disappear and red will fill the screen)

How do I achieve this?


Solution

  • Use the fluid prop:

    <v-container fluid>
      <!-- content -->
    </v-container>
    

    Codepen.