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

Question

I'm new to vuetify.js and started playing around with it.
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?

Answer 1

Use the fluid prop:
<v-container
fluid
/>
Codepen.

Answer 2

I was having the same issue.
I realized that in my instance I had a <v-content> on both the parent and child page. The <v-content> is used to make the app look pretty and manage spacing on the nav bar and title bar.
Be sure you only have one declared in your app.

Answer 3

Did you try using the margin and padding classes/props?
<v-container class="red ma-0">
or
<v-container class="red" :ma-0="$vuetify.breakpoint.mdAndDown">
for having the full screen only for mobile devices?

Answer 4

The answer posted by #Billial Begueradj is perfect. However, problem may still persist if there's an unchecked v-container tag up the hierarchy.
This will NOT work
<v-container>
<v-container fluid>This will not work</v-container>
<v-container>
In the above code, the inner v-container tag will not achieve full-width because there's another v-container tag up in the hierarchy that is not set to layout in full-width and it'll effectively limit the inner one
This will work
<v-container fluid>
<v-container fluid> This will work </v-container>
</v-container>
Setting both the inner and the outer v-container tags to occupy full width resolves it.

Answer 5

use fluid and remove the padding if any
<v-container fluid class="py-0 px-0"></v-container>

Answer 6

you may try like this
master.vue
<v-app id="app">
<v-navigation-drawer
v-model="drawer"
temporary
absolute
>
<sidebar></sidebar>
</v-navigation-drawer>
<v-toolbar dark color="primary" fixed app>
<v-toolbar-side-icon #click.stop="drawer = !drawer"></v-toolbar-side-icon>
<v-toolbar-title class="white--text">MyBlog</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items>
<v-text-field
color="purple"
id="globalSearch"
name="globalSearch"
label="Search"
v-model="globalSearch"
v-validate="'required'"
></v-text-field>
<v-btn to="dashboard" flat>Dashboard</v-btn>
<v-btn to="login" flat>Login</v-btn>
<v-btn flat>Register</v-btn>
</v-toolbar-items>
</v-toolbar>
<v-content>
<v-container fluid>
<router-view></router-view>
</v-container>
</v-content>
<v-footer height="auto">
<v-card
flat
tile
class="indigo lighten-1 white--text text-xs-center"
>
<v-card-text>
<v-btn
v-for="icon in icons"
:key="icon"
icon
class="mx-3 white--text"
>
<v-icon size="24px">#{{ icon }}</v-icon>
</v-btn>
</v-card-text>
<v-card-text class="white--text">
©2018 — <strong>Eliyas Hossain</strong>
</v-card-text>
</v-card>
</v-footer>
</v-app>
category.vue
<template>
<v-card>
<v-card-title>
<div>
<h2 class="pl-2">Categories</h2>
<v-btn #click="dialog = !dialog" color="primary" dark>New Category</v-btn>
</div>
<v-spacer></v-spacer>
<v-text-field
v-model="search"
append-icon="search"
label="Search"
single-line
hide-details
></v-text-field>
</v-card-title>
</v-card>
</template>
so it will take full space in right side.

Answer 7

For anyone using nuxt - make sure you apply the fluid prop to the top level v-container in the layout and not the ones in your page components.
<v-main>
<v-container fluid>
<Nuxt />
</v-container>
</v-main>