I have a default header which is defined in /layouts as below
<v-app-bar :elevation="0" color="white" fixed app>
<div class="w-100">
<NuxtLink to="/">
<v-img
max-height="24"
src="/nuxt_static/images/rectangle.png"
:contain="true"
></v-img>
</NuxtLink>
</div>
</v-app-bar>
<v-main>
<v-container style="padding: 0">
<nuxt />
</v-container>
</v-main>
I want that when I click on the image rectangle.png it will redirect to homepage. Homepage is defined in the first child index.vue of /pages/ directory with asyncData() function and a component contains it's template. When I enter http://example.com/ into browser, everything works fine. But when I'm in another page and click on the header image to go to homepage, it just displays the template and doesn't run through asyncData() function. Therefore, there is no data on homepage. What should I do for now?
Try to move your code in asyncData hook to fetch hook.
Fetch hook will be called both in server side or client side.
Related
So I have a list of objects each rendered in a list. At the same time, each list element should redirect to a specific route on click:
<template>
<b-container>
<h1 v-if="error">{{error}}</h1>
<b-table
sort-icon-left
borderless
outlined
v-else-if="coins"
#row-clicked="coinRowClickHandler"
selectable
small
:items="coins"
:fields="fields">
<template #cell(coin)="data">
<NuxtLink :to="`/${data.item.name}/dashboard`"><img :src="data.item.image" width="25" height="25"><b>{{data.item.name}}</b></NuxtLink>
</template>
<template #cell(current_price)="data">
{{ formatDollar(data.item.current_price, 20, 2) }}
</template>
<template #cell(price_change_percentage_24h)="data">
{{ formatPercent(data.item.price_change_percentage_24h) }}
</template>
<template #cell(market_cap)="data">
{{ formatDollar(data.item.market_cap, 20, 0) }}
</template>
</b-table>
<b-spinner v-else/>
</b-container>
</template>
As you can see, there is a click handler for each row click, the handler is the following:
coinRowClickHandler: function(event) {
console.log(event)
this.$router.push(`/${event.name}/dashboard`)
}
Now I am unsure which navigation method to use; whether using <NuxtLink> or programatically via this.$router.push.
The main reason I would keep the programatic navigation is simply because I do not know any other way to trigger page change on row click. On the other hand, I am afraid I would lose SEO advantages of <NuxtLink> Tag.
<nuxt-link> is basically a <router-link>, so it should have 0 benefit SEO-wise over the Vue variant.
As of what to use in your case, it's more a matter of button vs a:href. If you want to navigate to another page, it should be a link.
More details in this article: https://www.smashingmagazine.com/2019/02/buttons-interfaces/
Other advantages when using nuxt-link Nuxt can automatically prefetch pages with the prefetchLinks and prefetchPayloads options.
prefetchlinks
prefetchpayloads
I need to refresh a component on the page once a user fills up the account opening form. I know that :key="$route.fullPath" will not help me because my router path doesn't change.
This is the container that holds the router-view.
<template>
<section>
<the-navbar class="mb-4"></the-navbar>
<transition name="fade" mode="out-in">
<router-view></router-view>
</transition>
</section>
</template>
When a user clicks a button to open account, the following component is loaded. This component holds 2 child components - AccountOpenForm and AccountOpenConfirm. When a new account is opened, AccountOpenForm becomes hidden through the v-if directive and AccountOpenConfirm is shown instead.
What I need now is when the user clicks open account again, I need to fully reload the router view and display AccountOpenForm again. What's the best way to do that?
<template>
<v-container>
<div class="mx-2 mt-8">
<v-row>
<transition name="fade" mode="out-in">
<account-open-form
#create-account="createAccount"
:overlay="overlay"
v-if="!newAccount"
>
</account-open-form>
<account-open-confirm
:new-account="newAccount"
v-else
></account-open-confirm>
</transition>
</v-row>
</div>
</v-container>
</template>
The docs at https://vuetifyjs.com/en/components/application/#application-components mention that v-navigation-drawer can be configured to appear below (instead of next to) v-app-bar but they don't seem to explain how to actually do that.
Here's the layout I'm looking for (v-app-bar spanning the whole width of the window, and v-navigation-drawer sitting below v-app-bar):
How do I configure v-navigation-bar to render like that?
My current code looks like this:
<v-app>
<v-system-bar app height="30" color="primary">The system bar</v-system-bar>
<v-app-bar app color="secondary" dense dark>
The application bar
</v-app-bar>
<v-navigation-drawer app>
<p>Navigation drawer</p>
</v-navigation-drawer>
<v-main>
<v-container>
<router-view></router-view>
</v-container>
</v-main>
<v-footer app>The footer</v-footer>
<v-bottom-navigation app color="secondary">The bottom navigation</v-bottom-navigation>
</v-app>
And it renders like this (note the navigation-drawer being next to, instead of below the application bar)
You need to add clipped-left prop to your v-app-bar and clipped prop to your v-navigation-drawer.
I use Vuetify in my webapplication. The whole webapplication is responsive.
I have the problem that on smaller screens (Smartphone, Pad) I can zoom out of the website which means that I have a white space on the right of my website.
I don't know how this can happen and it is in every single page of my web application like that. What can I do that I use from beginning the whole space and the user can not zoom out from the website and gets this white space on the left?
Below a short example:
<template>
<v-app>
<v-main>
<v-container>
<v-row justify="center" align="center">
<v-col cols="12" xs="10" sm="10" md="10" lg="10" xl="10">
TEST_COL
</v-col>
</v-row>
</v-container>
</v-main>
</v-app>
</template>
<script>
export default {
data: () => ({
}),
}
</script>
<style>
</style>
Maybe the problem is in the App.vue file but I don't see any problem there. To be sure I post the app.vue below:
<template>
<v-app>
<Navbar />
<v-main>
<router-view></router-view>
</v-main>
<Footer />
</v-app>
</template>
I put two screenshots below so you see what i mean.
Thanks!
Chris
I got the answer. I used the <v-navigation-drawer> provided by Vuetify to create a drawer object. I used the following options:
<v-navigation-drawer v-model="drawer" absolute temporary right>
But absolute means it "Applies position: absolute to the component." which means that it takes extra space in the website. The option must be "fixed" instead of "absolute" then it works.
The good settings are:
<v-navigation-drawer v-model="drawer" fixed temporary right>
Now the drawer opens on the right side of the website (better for smartphones) and it doesn't take any absolute space!!
I have a vuejs running with a simple config and I am using vuetify for the UI
<template>
<v-app fill-height >
<v-navigation-drawer right temporary v-model="sideNav">
</v-navigation-drawer>
<v-toolbar dark class="deep-orange accent-3">
<v-toolbar-title >
<router-link to="/">Example</router-link>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
</v-toolbar>
<main>
<v-container >
<router-view></router-view>
</v-container>
</main>
<v-footer class="indigo">
<span class="white--text">© 2017</span>
</v-footer>
</v-app>
<template>
Let's assume that I have two paths : '/' and '/profile'.
Everything is rendering fine when the user lands on the '/' page (which is the default landing page), however there are problems when the user is on the '/profile' page and then refreshes it.
What is happening is that anything under the <view-router> get's lost. So the result is that the footer is not rendered., but anything above the <vue-router> is render correctly
If the user then navigates to the '/' page the footer is rendered, and will render if he then navigates back to '/profile'
What could be cause such behavior ?