Develop Reference

Create static left navbar component with Vue

I need a vertical navbar to the left of my app's layout, and with the content all across the right.
As it stands, I can't do that. My navbar pushes all the content down. How can I fix this?
This is what my App.vue's template looks like:
<template>
<div id="app">
<v-app>
<navbar/>
<v-main>
<v-container class="main-container">
<router-view/>
</v-container>
</v-main>
</v-app>
</div>
</template>
For the navbar component I am using vuetify, specifically the mini navbar
As per the example code, here is what it currently looks like:
<template>
<v-navigation-drawer
v-model="drawer"
:mini-variant.sync="mini"
permanent
>
<v-list-item class="px-2">
<v-list-item-avatar>
<v-img src="https://randomuser.me/api/portraits/men/85.jpg"></v-img>
</v-list-item-avatar>
<v-list-item-title>John Leider</v-list-item-title>
<v-btn
icon
#click.stop="mini = !mini"
>
<v-icon>mdi-chevron-left</v-icon>
</v-btn>
</v-list-item>
<v-divider></v-divider>
<v-list dense>
<v-list-item
v-for="item in items"
:key="item.title"
link
>
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
#Component<Navbar>({})
export default class Navbar extends Vue {
private value: string = 'home';
private drawer: boolean = true;
private items: Array<Object> = [
{ title: 'Home', icon: 'mdi-home-city' },
{ title: 'My Account', icon: 'mdi-account' },
{ title: 'Users', icon: 'mdi-account-group-outline' }
]
private mini: boolean = true;
}
</script>
As mentioned on the top, this is still just pushing all the app's content down. This is what it currently looks like:
What can I do so that on the left I have my navbar but on the right
Edit: For the sake of clarification, I do want the navbar to be vertical, but I just don't want it to push down all the content. Basically I want my app to have a side navigation

Wrap the navbar and main in a <v-row>:
<template>
<div id="app">
<v-app>
<v-row>
<navbar/>
<v-main>
<v-container class="main-container">
<router-view/>
</v-container>
</v-main>
</v-row>
</v-app>
</div>
</template>
By default, v-app has an internal wrapper with flex-direction: column CSS, meaning that its child elements are placed vertically. By wrapping these 2 child elements in a v-row, you place them in a wrapping element with flex-direction: row.

I guess you are misunderstanding the concepts. You are wrapping a v-navigation-drawer inside a navbar component.
In Vuetify v-navigation-drawer is a component used to build Sidebars and that's why your component is on vertical.
You should try to use v-app-bar instead. Here's the documentation: https://vuetifyjs.com/en/components/app-bars/
Edit 1
You can configure an app sidebar or an app navbar using the app option inside the component like that:
<v-navigation-drawer
app
>
...
</v-navigation-drawer>
Just like in the official documentation. If you do it that way, the component will work properly and your content will not be pushed down.

v-list-group sub-groups won't open based on path defined in group prop

I have a navigation sidebar with nested v-list-groups.
According to the documentation the "group" prop of v-list-group will expand the group based on the route namespace.
See:
https://vuetifyjs.com/en/components/lists/
This works well with the top level v-list-group.
It opens up if I reload the page and the route matches the "group" prop.
It does not work for the sub-group v-list-groups. When I reload the page I can see the subgroup closing, so I think the group prop is working. But something is making it close immediately after.
My code is a little complex, and I have to excuse my variable naming. I am rendering a list of navigation items, if they don't have a subgroup defined it renders as a regular item. If they have a subgroup it renders a subgroup. This goes two levels down.
This way I can define the whole navigation bar in a single json file and import it.
<template>
<v-list dense nav>
<template v-for="(sidebarItem, sidebarIndex) in sidebarItems">
<v-list-item
v-if="arrayIsEmptyOrUndefined(sidebarItem.subGroup)"
:key="sidebarIndex"
:to="sidebarItem.linkTo"
nuxt
>
<v-list-item-action>
<v-icon>{{ sidebarItem.icon }}</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title v-text="sidebarItem.title" />
</v-list-item-content>
</v-list-item>
<v-list-group
v-if="
(!arrayIsEmptyOrUndefined(sidebarItem.subGroup) &&
typeof sidebarItem.subGroup !== 'undefined')
"
:key="sidebarIndex"
:prepend-icon="sidebarItem.icon"
:group="sidebarItem.linkTo"
>
<template v-slot:activator>
<v-list-item-content>
<v-list-item-title>{{ sidebarItem.title }}</v-list-item-title>
</v-list-item-content>
</template>
<v-list-item
v-if="arrayIsEmptyOrUndefined(sidebarItem.subGroup)"
:key="subGroupIndex"
:to="sidebarItem.linkTo"
nuxt
>
<v-list-item-action>
<v-icon>{{ sidebarItem.icon }}</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title v-text="sidebarItem.title" />
</v-list-item-content>
</v-list-item>
<template v-for="(subGroupItem, subGroupIndex) in sidebarItem.subGroup">
<v-list-item
v-if="arrayIsEmptyOrUndefined(subGroupItem.subGroup)"
:key="subGroupIndex"
:to="subGroupItem.linkTo"
nuxt
>
<v-list-item-action>
<v-icon>{{ subGroupItem.icon }}</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title v-text="subGroupItem.title" />
</v-list-item-content>
</v-list-item>
<v-list-group
v-if="
(!arrayIsEmptyOrUndefined(subGroupItem.subGroup) &&
typeof subGroupItem.subGroup !== 'undefined')
"
:key="subGroupIndex"
sub-group
:group="subGroupItem.linkTo"
>
<template v-slot:activator>
<v-list-item-content>
<v-list-item-title>{{ subGroupItem.title }}</v-list-item-title>
</v-list-item-content>
</template>
<v-list-item
v-for="(subGroupSubGroupItem, subGroupSubGroupIndex) in subGroupItem.subGroup"
:key="subGroupSubGroupIndex"
:to="subGroupSubGroupItem.linkTo"
nuxt
exact
>
<v-list-item-content>
<v-list-item-title v-text="subGroupSubGroupItem.title" />
</v-list-item-content>
<v-list-item-action>
<v-icon>{{ subGroupSubGroupItem.icon }}</v-icon>
</v-list-item-action>
</v-list-item>
</v-list-group>
</template>
</v-list-group>
</template>
</v-list>
</template>
If the route namespace matches both the group and the subgroup only the group opens up.
The vuetify documentation site has a working implementation of this. If you go there and navigate down to a sub group and refresh the page. The subgroup will be open.

Wow! This ended up being more difficult than I originally expected. I solved this by looking directly at the source code for the Vuetify docs website, specifically the main nav drawer component, the base-group component, the base-subgroup component, and the base-item component. These components were separated out into separate files for ease of composition and maintainability, but I've recombined them in the template below:
<template>
<v-navigation-drawer permanent>
<v-toolbar color="indigo" dark>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Main Menu</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</v-toolbar>
<v-list
dense
expand
nav
>
<!-- ENTIRE list is wrapped in a template -->
<template v-for="item in $router.options.routes">
<!-- use v-if to determine if 2nd level nesting is needed -->
<!-- if it's a menu item with no children -->
<v-list-item
v-if="!item.children"
color="indigo"
:key="item.name`"
:to="item.path"
>
<v-list-item-icon>
<v-icon>{{ `mdi-${item.meta.icon}` }}</v-icon>
</v-list-item-icon>
<v-list-item-title>{{ item.name }}</v-list-item-title>
</v-list-item>
<!-- else if it has children -->
<v-list-group
v-else
:group="item.path"
color="indigo"
>
<!-- this template is for the title of top-level items with children -->
<template #activator>
<v-list-item-content>
<v-list-item-title>
<v-icon>{{ `mdi-${item.meta.icon}` }}</v-icon>
{{ item.name }}
</v-list-item-title>
</v-list-item-content>
</template>
<!-- this template is for the children/sub-items (2nd level) -->
<template v-for="subItem in item.children">
<!-- another v-if to determine if there's a 3rd level -->
<!-- if there is NOT a 3rd level -->
<v-list-item
v-if="!subItem.children"
class="ml-5"
:key="subItem.name"
:to="item.path + subItem.path"
>
<v-list-item-icon class="mr-4">
<v-icon v-text="`mdi-${subItem.meta.icon}`" />
</v-list-item-icon>
<v-list-item-title class="ml-0">
{{ subItem.name }}
</v-list-item-title>
</v-list-item>
<!-- if there is a 3rd level -->
<v-list-group
v-else
color="indigo"
:group="subItem.path"
sub-group
>
<template #activator>
<v-list-item-content>
<v-list-item-title>
<v-icon>{{ `mdi-${subItem.meta.icon}` }}</v-icon>
{{ subItem.name }}
</v-list-item-title>
</v-list-item-content>
</template>
<template v-for="(subSubItem, k) in subItem.children">
<v-list-item
:key="`subheader-${k}`"
color="indigo"
:value="true"
:to="item.path + subItem.path + subSubItem.path"
>
<v-list-item-title>{{ subSubItem.name }}</v-list-item-title>
<v-list-item-icon>
<v-icon>{{ `mdi-${subSubItem.meta.icon}` }}</v-icon>
</v-list-item-icon>
</v-list-item>
</template>
</v-list-group>
</template>
</v-list-group>
</template>
</v-list>
</v-navigation-drawer>
</template>
As you may have noticed, the menu is generated from the list of routes in Vue Router. The router definition looks like this (NOTE: since this just an example, I did NOT associate a component with each route, but in practice, that would be necessary):
const router = new VueRouter({
routes: [
{
name: 'No Children (1 level)',
path: '/no-children',
meta: {
icon: 'baby-carriage-off',
},
},
{
name: 'Attractions (2 levels)',
path: '/attractions',
meta: {
icon: 'airballoon',
},
children: [
{
name: 'Carnivals',
path: '/carnivals',
meta: {
icon: 'drama-masks',
},
},
{
name: 'Museums',
path: '/museums',
meta: {
icon: 'bank',
},
},
]
},
{
name: 'Restaurants (3 levels)',
path: '/restaurants',
meta: {
icon: 'silverware-fork-knife',
},
children: [
{
name: 'Japanese',
path: '/japanese',
meta: {
icon: 'map-marker-radius-outline',
},
children: [
{
name: 'Hikari Sushi',
path: '/hikari-sushi',
meta: {
icon: 'food-croissant',
},
},
{
name: 'Late Night Ramen',
path: '/late-night-ramen',
meta: {
icon: 'noodles',
},
},
]
},
{
name: 'Italian',
path: '/italian',
meta: {
icon: 'map',
},
children: [
{
name: 'Jersey Pizza',
path: '/jersey-pizza',
meta: {
icon: 'pizza',
},
},
{
name: 'Im-pasta-ble',
path: '/im-pasta-ble',
meta: {
icon: 'pasta',
},
},
]
},
{
name: 'Mexican',
path: '/mexican',
meta: {
icon: 'map-marker',
},
children: [
{
name: 'Taco Gato',
path: '/taco-gato',
meta: {
icon: 'taco',
},
},
{
name: 'A-maize-ing',
path: '/a-maize-ing',
meta: {
icon: 'corn',
},
},
]
},
]
},
]
})
Here's a full, working example on codepen. I configured it to have a starting route of /restaurants/japanese/late-night-ramen and when you click on any of the endpoints, the path to which the application will be routed is logged in the console. Hope this helps!

Limit maximum page length in css

I have a Vue application running Vuetify but neither of these seem to be equipped to handle my desire to limit the maximum length of the page to be such that there is no scrolling. I hope that makes sense. My hope is to just pull up a screen with a bunch of routing to similarly formatted screens. Of course, the user could make the window smaller, in which case I would need scrolling. So how would I set that up when I want to have the page open to full screen with a maximum page length that will prevent the NEED for scrolling, but still allow scrolling if the need is there due to the user resizing the page to something a good bit smaller?
I spent hours looking around for details on this but didn't find anything that really seemed to be a direct solution. How can I set a max page length? Would CSS offer this? I saw a solution putting CSS in the <head>-tag but with a Vue application this head tag doesn't get used in the same way as typical HTML pages.
EDIT: because I don't think it's clear that because I'm working in vue/vuetify the solution might be different from the general case, I think it is best if I provide my App.vue and an example page.
--- App.vue ---
<template>
<v-app>
<app-toolbar></app-toolbar>
<router-view></router-view>
<app-footer></app-footer>
</v-app>
</template>
<script>
import AppToolbar from "./components/AppToolbar.vue";
import AppFooter from "./components/AppFooter.vue";
export default {
name: "App",
components: {
AppToolbar,
AppFooter
},
data: () => ({
//
})
};
</script>
<style scoped></style>
--- Homepage.vue ---
<template>
<div>
<v-app>
<v-responsive aspect-ratio="16/9">
<v-carousel cycle hide-delimiter-background show-arrows-on-hover>
<v-carousel-item
v-for="(item, i) in items"
:key="i"
:src="item.src"
reverse-transition="fade-transition"
transition="fade-transition"
></v-carousel-item>
</v-carousel>
</v-responsive>
</v-app>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
src: "https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg"
},
{
src: "https://cdn.vuetifyjs.com/images/carousel/sky.jpg"
},
{
src: "https://cdn.vuetifyjs.com/images/carousel/bird.jpg"
},
{
src: "https://cdn.vuetifyjs.com/images/carousel/planet.jpg"
}
]
};
}
};
</script>
<style></style>
EDIT 2: Adding the app-toolbar & app-footer
--- Toolbar.vue ---
<template>
<div>
<v-toolbar dense color="#3F51B5" dark>
<v-app-bar-nav-icon
color="#76ff03"
#click.stop="drawer = !drawer"
></v-app-bar-nav-icon>
<v-btn to="/" color="#76ff03" text>Vuetification</v-btn>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-row align="center" justify="center">
<v-badge bordered color="error" icon="mdi-lock" overlap>
<v-btn class="white--text" color="error" depressed>
Lock Account
</v-btn>
</v-badge>
<div class="mx-3"></div>
<v-badge
bordered
bottom
color="deep-purple accent-4"
dot
offset-x="10"
offset-y="10"
>
<v-avatar size="40">
<v-img src="https://cdn.vuetifyjs.com/images/lists/2.jpg"></v-img>
</v-avatar>
</v-badge>
<div class="mx-3"></div>
<v-badge avatar bordered overlap>
<template v-slot:badge>
<v-avatar>
<v-img src="https://cdn.vuetifyjs.com/images/logos/v.png"></v-img>
</v-avatar>
</template>
<v-avatar size="40">
<v-img src="https://cdn.vuetifyjs.com/images/john.png"></v-img>
</v-avatar>
</v-badge>
</v-row>
<div class="hidden-sm-and-down">
<v-btn icon>
<v-icon color="#76ff03">mdi-magnify</v-icon>
</v-btn>
<v-btn icon>
<v-icon color="#76ff03">mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon color="#76ff03">mdi-dots-vertical</v-icon>
</v-btn>
<v-btn color="#76ff03" text>About</v-btn>
<v-btn to="/contact" color="#76ff03" text>Contact</v-btn>
<v-btn to="/login" color="#76ff03" text>Login</v-btn>
</div>
</v-toolbar>
<v-navigation-drawer
v-model="drawer"
expand-on-hover
app
temporary
right
height="160px"
>
<v-list-item>
<v-list-item-avatar>
<v-img src="https://randomuser.me/api/portraits/men/78.jpg"></v-img>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>John Leider</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider></v-divider>
<v-list dense>
<v-list-item v-for="item in items" :key="item.title" link>
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
</div>
</template>
<script>
export default {
data() {
return {
drawer: false,
items: [
{ title: "Home", icon: "mdi-ghost" },
{ title: "About", icon: "mdi-kabaddi" }
]
};
}
};
</script>
<style scoped>
.toolbar-item {
color: #76ff03;
}
</style>
--- Footer.vue ---
plate>
<v-app>
<v-footer dark padless fixed>
<v-card class="flex" text tile>
<v-card-title class="teal">
<strong class="subheading"
>Get connected with us on social networks!</strong
>
<v-spacer></v-spacer>
<v-btn v-for="icon in icons" :key="icon" class="mx-4" dark icon>
<v-icon color="#76ff03" size="24px">{{ icon }}</v-icon>
</v-btn>
</v-card-title>
<v-card-text class="text-center">
<v-layout>
<v-flex class="toolbar-item" v-for="(col, i) in rows" :key="i" xs3>
<span class="body-2" v-text="col.title.toUpperCase()" />
<div v-for="(child, i) in col.children" :key="i" v-text="child" />
</v-flex>
<v-flex class="toolbar-item" xd3 layout column>
<span class="body-2">CONTACT</span>
<div>
<v-icon color="#76ff03" size="18px" class="mr-3"
>fa-home</v-icon
>
New York, NY 10012, US
</div>
<div>
<v-icon color="#76ff03" size="18px" class="mr-3"
>fa-envelope</v-icon
>
info#example.com
</div>
<div>
<v-icon color="#76ff03" size="18px" class="mr-3"
>fa-phone</v-icon
>
+ 01 234 567 89
</div>
<div>
<v-icon color="#76ff03" size="18px" class="mr-3"
>fa-print</v-icon
>
+ 98 765 432 10
</div>
</v-flex>
</v-layout>
<strong> {{ new Date().getFullYear() }} — Vuetify </strong>
</v-card-text>
</v-card>
</v-footer>
</v-app>
</template>
<script>
export default {
data: () => ({
icons: [
"fab fa-facebook",
"fab fa-twitter",
"fab fa-google-plus",
"fab fa-linkedin",
"fab fa-instagram"
],
rows: [
{
title: "Company Name",
children: [
"Here you can use rows and columns here to organize your footer content. Lorem ipsum dolor sit amet, consectetur adipisicing elit"
]
},
{
title: "Produts",
children: [
"MDBootstrap",
"MDWordPress",
"BrandFlow",
"BootstrapAngular"
]
},
{
title: "Useful Links",
children: [
"Your account",
"Become an Affiliate",
"Shipping Rates",
"Helper"
]
}
]
})
};
</script>
<style scoped>
strong {
color: #76ff03;
}
.toolbar-item {
color: #76ff03;
}
</style
>

By default, if the HTML content is larger than the window, the browser will create scrollbars and if it's smaller than the window there won't be a scroll. However, I don't think this is what you're really asking for. I think you're trying to change the window size itself.
I'm going to start by saying its very bad practice to modify the size of the user's browser window. You should work to make your content fit instead.
That said, as Vue.js and Vuetify are built on Javascript, and you'll need to write some custom JS to resize the browser window. The default overflow on the <body> tag (yes those exist in a Vue app) will take care of the scrolling...
window.resizeTo(width, height);
Should be called after Vue has rendered the content to the screen so inside Vue's Mounted Lifecycle hook.
Now, I assume the height of the content changes so you would want to grab the height of the Vue app div.
var newHeight = document.getElementById('app').innerHeight()
You also want to get the screen size so you don't make the window larger than the screen. You can get that height from the screen object.
var screenHeight = window.screen.height
so
if(newHeight < screenHeight){
window.resizeTo('800px', newHeight);
} else {
window.resizeTo('800px', screenHeight);
}
Before you do this
You should know that most modern browsers BLOCK the window.resizeTo() function so again you should find a different solution to the problem.

You Can nest your content inside another div element.If max-height of your inner div is equal to the height of its container, scroll bar will never appear. if you want to see scroll bar use this.
.scrollDiv {
height:auto;
max-height:150%;
overflow:auto;
}

Vuetify overlay overlays the drawer

I'm trying to create a navbar for Vue application, I'm using Vuetify, on large screen there is toolbar, on small there is hamburger icon which opens the navigation drawer.
It works, but there is an overlay that comes in front of drawer and I can't change a page.
Here is the code:
<template>
<div>
<v-app-bar dark>
<v-app-bar-nav-icon class="hidden-md-and-up" #click="sidebar = !sidebar"></v-app-bar-nav-icon>
<v-navigation-drawer v-model="sidebar" app>
<v-list>
<v-list-item v-for="(item, i) in menuItems" exact :key="i" :to="item.path">{{item.title}}</v-list-item>
</v-list>
</v-navigation-drawer>
<v-toolbar-title>Jobify</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-btn text v-for="item in menuItems" :key="item.title">
<router-link :to="item.path">{{item.title}}</router-link>
</v-btn>
</v-toolbar-items>
</v-app-bar>
</div>
</template>
<script>
export default {
data: function() {
return {
sidebar: false,
menuItems: [
{ path: "/jobs", name: "jobs", title: "Jobs" },
{ path: "/companies", name: "companies", title: "Companies" },
{ path: "/jobs/new", name: "new-job", title: "Add job" }
]
};
}
};
</script>
<style>
</style>
Only Vuetify components that I'm using are here, there is, actually, v-app in App component.

Try to add hide-overlay prop to the v-navigation-drawer component in order to hide the overlay :
<v-navigation-drawer v-model="sidebar" app hide-overlay >

unable to show signup page vue.js

I am unable to route to signup page when goto signup button is pressed, I have attached the code snippets below.
SignUp.vue
<template>
<v-app id="inspire">
<v-content>
<v-container
fluid
fill-height
>
<v-layout
align-center
justify-center
>
<v-flex
xs12
sm8
md4
>
<v-card class="elevation-12">
<v-toolbar
color="primary"
dark
flat
>
<v-toolbar-title>SIGNUP FORM</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-card-text>
<v-form>
<v-text-field
label="Email"
name="email"
type="text"
></v-text-field>
<v-text-field
id="password"
label="Password"
name="password"
type="password"
></v-text-field>
</v-form>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary">SIGN UP</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-content>
</v-app>
</template>
router.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import SignUp from './views/SignUp.vue';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/home',
name: 'home',
component: Home,
},
{
path: '/signup',
name: 'signup',
component: SignUp,
},
],
});
App.vue
<template>
<v-app>
<v-content>
<v-btn :to="{ name:'signup'}">GOTO SIGNUP</v-btn>
</v-content>
</v-app>
</template>
<script>
export default {
name: 'App',
components: {
},
data: () => ({
//
}),
};
</script>
When I execute this code there is no error in console and everything compiles correctly I am able to see "GOTO SIGNUP" button but when I click it nothing happens no errors,nothing happens, can you please help me to reroute to signup page I am using feathersjs,vue.js and vuetify. Any help would be appreciated. Thanks in anticipation.

If App.vue is where you're defining your main Vue instance, you will need to add the router to it:
<script>
import 'router' from 'router.js'
export default {
name: 'App',
router,
components: {
},
data: () => ({
//
}),
};
</script>
Also, as #Alexander Staroselsky mentioned in the comment, you will need to add a <router-view> element so Vue knows where to render the route component.
<template>
<v-app>
<v-content>
<v-btn :to="{ name:'signup'}">GOTO SIGNUP</v-btn>
<router-view></router-view>
</v-content>
</v-app>
</template>