I'm using a vuetify application, App.vue looks like this
<template>
<v-app class="grey lighten-4">
<nav>
<Header/>
</nav>
<section><NavigationBar/></section>
<v-content>
<router-view></router-view>
</v-content>
<Footer/>
</v-app>
</template>
This works perfectly. But I faced the situation, when I need to create an empty page, so I don't want load footer, header or bar. Is there any way to create a route for an empty page in this case?
Nested Routes
https://router.vuejs.org/guide/essentials/nested-routes.html
<template>
<v-app class="grey lighten-4">
<router-view>
<nav>
<Header/>
</nav>
<section><NavigationBar/></section>
<v-content>
<router-view></router-view>
</v-content>
<Footer/>
<router-view>
</v-app>
</template>
Related
I need to place logo on left side of navbar and tabs on the right side. I use v-space to do it but it doesn't work. I checked - it works fine with v-btn but not with v-tabs. I use Vue 2 and Vuetify 2.6:
App.vue
<template>
<v-app>
<v-main>
<Navbar />
<router-view/>
</v-main>
</v-app>
</template>
Navbar.vue
<template>
<v-app-bar
app
dense
dark >
<v-img
alt="Vuetify Logo"
class="shrink mr-2"
contain
src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
transition="scale-transition"
width="40"
/>
<v-spacer></v-spacer>
<v-tabs>
<v-tab>Project</v-tab>
<v-tab>Users</v-tab>
<v-tab>Settings</v-tab>
</v-tabs>
</v-app-bar>
</template>
This is what I got:
I wanted menu (tabs) to be aligned to the right. Why v-spacer is not working here?
I also checked this topic https://github.com/nuxt-community/vuetify-module/issues/165 but it also does not solve the issue.
Check this codesandbox I made: https://codesandbox.io/s/stack-70115344-jzhii?file=/src/components/Navbar.vue
There's no need to use a v-spacer. You only need to set the right prop to the v-tabs component.
<v-tabs right>
<v-tab>Project</v-tab>
<v-tab>Users</v-tab>
<v-tab>Settings</v-tab>
</v-tabs>
Try <v-tabs right>
<template>
<v-app-bar
app
dense
dark >
<v-img
alt="Vuetify Logo"
class="shrink mr-2"
contain
src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
transition="scale-transition"
width="40"
/>
<v-tabs right>
<v-tab>Project</v-tab>
<v-tab>Users</v-tab>
<v-tab>Settings</v-tab>
</v-tabs>
</v-app-bar>
</template>
I have copied the example of Vuetify date picker from the official documentation:
<v-row justify="center">
<v-date-picker v-model="picker"></v-date-picker>
</v-row>
This code gives me the following result:
The desired result:
The DP shows up only when hovering on what looks like an input, The Vuetify version is 2.5.0
This is the app structure:
<template>
<div id="app">
<v-app id="my-app">
<mit-side-bar #sideBarOpened="hover_handler"></mit-side-bar>
<template>
<div class="text-center">
<v-overlay :value="hover" z-index="5"></v-overlay>
</div>
</template>
<v-main style="background: #E5E5E5">
<slot></slot>
</v-main>
<v-footer padless color="#FBFDFF">
<v-col
class="text-center"
cols="12"
style="color: #899BAF"
>
{{ new Date().getFullYear() }} —
Система мониторинга социально-экономического развития АЗРФ
</v-col>
</v-footer>
</v-app>
</div></template>
Short answer
<v-app>
YOUR ORIGIN CODE PASTE HERE
</v-app>
Long answer ->
Vuetify need to follow this structure.
<v-app>
<v-row>
<v-CHOOSE-APP></v-CHOOSE-APP>
</v-row>
</v-app>
As it is mentioned here you must wrap it in a v-app component in order for your application to work properly.
Try like
<v-app id="inspire">
<v-row justify="center">
<v-date-picker v-model="picker"></v-date-picker>
</v-row>
</v-app>
Passing a header component as a named slot into router-view. But router-view not exactly displaying it. Normally this was work in vue 2. But it's not with vue 3. Is the way doing it changed or is it impossible to do it now?
header component
<template>
<header id="g-header">
<figure>
<img id="logo"
src="#/assets/images/logo.jpg"
alt="The beautiful MDN logo.">
</figure>
<nav id="g-nav" class="flex justify-space-between">
<a v-for="(link, idx) in links" :key="idx"
class="flex justify-center align-center capitalize"
:href="link.val">{{ link.text }}</a>
</nav>
</header>
</template>
router-view component
<template>
<div id="moduleA" class="modules">
<router-view class="moduleA-children">
<template #header>
<app-header></app-header>
</template>
</router-view>
</div>
</template>
children view component
<template>
<div id="step1">
<slot name="header"></slot>
<div class="row">the named slot OR default slot not showing</div>
</div>
</template>
Is there a way to accomplish this? Or do I missing something here?
In Vue Router 4, <router-view> exposes the component to render as a v-slot prop, named Component, which would be used with the built-in <component> tag. You could pass any slots to the component within that <component> tag:
<router-view v-slot="{ Component }">
<component :is="Component">
<template #header>
<app-header></app-header>
</template>
</component>
</router-view>
demo
I desire to see the content of uwc.vue upon clicking the "Let's GO" button (which is in App.vue).
But, the url changes & the content's of the screen still remain the same.
I am new to vue, I asked this question to the Vuetify community but it was ignored.
Thank you in advance.
router.js:
import Vue from 'vue';
import Router from 'vue-router';
import uwc from '../views/uwc';
Vue.use(Router);
export default new Router({
mode: 'history',
routes: [
{ path: '/', name: 'uwc', component: uwc},
]
});
App.vue
<template>
<v-app>
<v-container fluid>
<v-col class="d-flex mx-auto" >
<!-- UWC Card -->
<v-card class="mx-auto my-15" max-width="400" >
<v-img height="400px" class="image-fit" src="./img/UWC-logo.webp" ></v-img>
<v-divider class="mx-4"></v-divider>
<v-card-title>
<p class="text-break">
University of the Western Cape
</p>
</v-card-title>
<v-card-actions>
<router-link to="/views/uwc">
Let's GO
</router-link>
</v-card-actions>
</v-card>
</v-col>
</v-container>
</v-app>
</template>
<script>
export default {
name: 'app',
}
</script>
uwc.vue (the file I want to display on clicking the "Let's GO" button):
<template>
<v-app id="inspire">
<router-view></router-view>
<v-container fluid>
<v-row>
<template v-for="n in 4">
<v-col :key="n" class="mt-2" cols="12">
<strong> Category {{ n }} </strong>
</v-col>
<v-col v-for="j in 6" :key="`${n}${j}`" cols="6" md="2">
<v-sheet height="150"></v-sheet>
</v-col>
</template>
</v-row>
</v-container>
</v-app>
</template>
First of all, this isn't a 'Vuetify' question. Its a general routing question for VueJS.
Your primary problem is that you do not have a <router-view/> in your App.vue file. This is what renders the paths in your router.
App.vue
<template>
<div>
<router-view/>
</div>
</template>
Now if you visit the '/' path, you will see the contents of your uwc.vue file.
I also wanted to point out another error.
Your <router-link></router-link> tags refer to the path in your router file, not the path to the file is located in your folder structure.
You have:
<router-link to="views/uwc">
Should be:
<router-link to="/">
If you are continuing to struggle, create a brand new app using the [Vue CLI][1].
Then add the router using vue add router. It will give you a pretty solid example to work off of on your app.
[1]: https://cli.vuejs.org/guide/creating-a-project.html#vue-create
I have an avatar image, upon click I'd like to route to one of my paths. I understand I can do it with router-view, but also that vuetify inherits its properties.
What is missing?:
<div id="app">
<v-app>
<v-app-bar>
<v-toolbar-items>
<v-avatar to="'/profile'">
<v-img src="http://www.dumpaday.com/wp-content/uploads/2019/10/00-156-750x280.jpg"></v-img>
</v-avatar>
</v-toolbar-items>
</v-app-bar>
</v-app>
</div>
full example:
https://codepen.io/toit123/pen/GRRmpqq
v-avatar isn't a link abd doesn't support to so you have to wrap your image with a router link like:
<div id="app">
<v-app>
<v-app-bar>
<v-toolbar-items>
<router-link to="/profile">
<v-avatar>
<v-img src="http://www.dumpaday.com/wp-content/uploads/2019/10/00-156-750x280.jpg"></v-img>
</v-avatar>
</router-link>
</v-toolbar-items>
</v-app-bar>
</v-app>
</div>
Or you add a custom click event on the v-avatar and do the routing in a method like
<v-avatar #click="forward">
JS
methods: {
forward() {
this.$router.push("/profile")
}
}