Vuetify router alignment - vue.js

Question

I'm trying to setup at route that contains just a table with a layout inspired by the Vuetify team.
I have a problem that the table does not take only a small part of the screen.
I have tried using v-layout with "row", "column" and different paddings and marging.
App.vue:
<template>
<v-app>
<router-view/>
</v-app>
</template>
<script>
export default {
name: 'App',
};
</script>
Menu.vue:
<template>
<v-container>
<v-navigation-drawer
clipped
fixed
v-model="drawer"
app
>
<v-list dense>
<v-list-tile
:to="{name: 'dashboard'}"
>
<v-list-tile-action>
<v-icon>dashboard</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>Dashboard</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile
:to="{name: 'settings'}"
>
<v-list-tile-action>
<v-icon>settings</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>Settings</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile
#click="logout();"
>
<v-list-tile-action>
<v-icon>logout</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>Logout</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-toolbar app fixed clipped-left>
<v-toolbar-side-icon #click.stop="drawer = !drawer"></v-toolbar-side-icon>
<v-toolbar-title>Hello, {{ name }}</v-toolbar-title>
</v-toolbar>
<v-content>
<v-container fluid fill-height>
<v-layout justify-center align-center>
<v-flex shrink>
<router-view></router-view>
</v-flex>
</v-layout>
</v-container>
</v-content>
<v-footer app fixed>
<span>© arcyfelix 2019</span>
</v-footer>
</v-container>
</template>
<script>
export default {
name: 'MainMenu',
data() {
return {
drawer: false,
name: 'Wojciech',
};
},
methods: {
logout() {
this.$router.push({ name: 'home' });
},
},
};
</script>
Dashboard.vue:
<template>
<v-layout full-width>
<v-data-table
:items="desserts"
class="elevation-1"
hide-actions
hide-headers
expand
:loading="true"
>
<template v-slot:items="props">
<td class="text-xs-left">2019-07-01</td>
<td>{{ props.item.name }}</td>
<td>
<v-btn
small
depressed
flat
>
Edit
</v-btn>
</td>
</template>
</v-data-table>
</v-layout>
</template>
<script>
export default {
name: 'Dashboard',
data() {
return {
desserts: [
{
name: 'Frozen Yogurt',
},
{
name: 'Donut',
},
{
name: 'KitKat',
},
],
};
},
};
</script>
router.js:
import Vue from 'vue';
import Router from 'vue-router';
import Menu from './layouts/Menu.vue';
import MainMenu from './layouts/MainMenu.vue';
import Dashboard from './views/Dashboard.vue';
import Login from './views/Login.vue';
import Home from './views/Home.vue';
Vue.use(Router);
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: 'auth',
name: 'auth',
component: Menu,
children: [
{
path: 'dashboard',
name: 'dashboard',
component: Dashboard,
},
{
path: 'settings',
name: 'settings',
component: () => import(/* webpackChunkName: "about" */ './views/Settings.vue'),
},
],
},
{
path: '/',
name: 'mainMenu',
component: MainMenu,
children: [
{
path: 'home',
name: 'home',
component: Home,
},
{
path: 'login',
name: 'login',
component: Login,
},
{
path: 'register',
name: 'register',
component: () => import(/* webpackChunkName: "about" */ './views/Register.vue'),
},
],
},
],
});
I would like to take it 2/3 or full width of the screen.

Answer 1

What you really want is to put the menu outside of the router-view otherwise it has to reload on each page load. You also want to move the container definition inside of the v-content element and make sure it uses fill-height too less you end up with an odd background mesh.
<v-app>
<my-menu></my-menu>
<v-content>
<v-container fluid fill-height>
<router-view></router-view>
</v-container>
</v-content>
</v-app>
Now just change your Dashboard code and layout:
<v-layout row wrap>
<v-flex xs12>
//the rest of the dashboard code
</v-flex>
</v-layout
And you're good to go.