I'm just starting with nuxtjs, i have 2 pages
-index
-map
map page has one component, which is client only
and the default layout has links to the 2 pages, just the basic setup
the production build generates code split for the vendor per page but both files loads at the first page, i can't find what am i missing.
map page
<div class="container">
<client-only>
<Map />
</client-only>
</div>
</template>
<script>
import Map from '~/components/Map.vue'
export default {
components: {
Map
}
}
</script>
<style>
</style>
index page
<template>
<div class="container">
<h1 class="h-1">test hello page index</h1>
</div>
</template>
<script>
export default {
components: {
}
}
</script>
<style>
</style>
default layout
<template>
<div>
<nuxt-link to="/">home</nuxt-link>
<nuxt-link to="/map">map</nuxt-link>
<nuxt />
</div>
</template>
<style>
</style>
This is because nuxt-link prefetches the page it is linked to when it appears inside the viewport.
It's for performance reason and should not impact the initial loading of the page, since the prefetching is done during idle time.
If you would like to verify that what you are seeing is because of the prefetching, you can disable prefetching on per link basis by adding a no-prefetch attribute to nuxt-link or configuring router in nuxt.config.js
// nuxt.config.js
export default {
router: {
prefetchLinks: false
}
}
This is done only if user is on good network connection and not using save data mode. And, since this is done in browser's idle time, I'd suggest, leave it like this. Should not hurt.
Related
i'm new of this framework :(
the problem is here because i've tried to put the component in another page and work it.
It sign error the component
this is my index.vue page
If you're using nuxt2.0, you should wrap them in a container but this is not needed in nuxt3.0.
<template>
<main>
<navbar />
<slideshow />
</main>
</template>
If this is nuxt2.0, then you should also import the component and register it but you haven't done it here. The path you've given to the component is not correct also.
<script>
import Slideshow from '~/components/slideshow.vue';
export default {
components: { Slideshow }
}
</script>
You need to wrap the into a div or any other tag (to not have multiple tags at the root of the template) like that
<template>
<div>
<navbar></navbar>
<slideshow></slideshow>
</div>
</template>
And you can also skip the import part because Nuxt is already doing that for you as explained here: https://nuxtjs.org/tutorials/improve-your-developer-experience-with-nuxt-components/
What is the difference between these two components in Nuxt3 and how do I use them correctly?
If I want to use pages/... what is the right approach here to create links and jump from page to page?
Everything is pretty much explained in the documentation: https://v3.nuxtjs.org/migration/pages-and-layouts/
You need to use this in app.vue
<template>
<nuxt-layout>
<nuxt-page /> <!-- used to display the nested pages -->
</nuxt-layout>
</template>
With a default /layouts/default.vue file
<template>
<div>
this is coming from the layout
<slot /> <!-- required here only -->
</div>
</template>
You will get this on / (with /pages/index.vue)
<template>
<div>index page</div>
</template>
And with the following structure, you will achieve dynamic pages
/pages/users/index.vue
<script setup>
definePageMeta({
layout: false
});
function goToDynamicUser() {
return navigateTo({
name: 'users-id',
params: {
id: 23
}
})
}
</script>
<template>
<div>
<p>
index page
</p>
<button #click="goToDynamicUser">navigate to user 23</button>
</div>
</template>
/pages/users/[id].vue
<script setup>
definePageMeta({
layout: false
});
const route = useRoute()
</script>
<template>
<pre>{{ route.params.id }}</pre>
</template>
I've removed the layout here to show how to disable it, but you can totally let the default here or even provide a custom one.
So, nuxt-page is to be used when you want to display the pages in your app (replacing <nuxt /> and <nuxt-child />) while <slot /> is to be used in the layout (as any other component using the slot tag).
So I'm creating a relatively large website using Vue and Vue-router and different pages require different navigation bars (each custom components rendered on top of the page)(and some pages don't have a navbar at all) and currently I'm using a similar format to this:
<template>
<div>
<div v-if="firstNavbar">
<FirstNav />
<div>
<div v-if="secondNavbar">
<SecondNav />
</div>
<router-view />
</div>
</template>
But re-rendering the entire page for every routing event just because the navbar changed seems a bit inefficient, and I was wondering what I could do to remedy this.
Any help would be appreciated, thanks.
I would suggest the use of <keep-alive> element to cache the navbars. Try this
APP.vue
<template>
<keep-alive>
<component :is="getConditionallyRenderedNavbar"></component>
</keep-alive>
<router-view />
</template>
<script>
import firstNavbar from './firstNavbar.vue';
import secondNavbar from './secondNavbar.vue;
export default{
components:{
firstNavbar,
secondNavbar
},
computed: {
getConditionallyRenderedNavbar() {
return firstNav //or second nav or no nav
}
}
}
</script>
To find out more, check here
I've been trying to pass a prop to a component, which is a URL to an image for Section component to update v-bind:src of dom img tag, but somehow the image does not show up.
I can't see what's wrong.
File: App.vue
<template>
<div id="app">
<Section img="../assets/linux.png" />
</div>
</template>
<script>
import Section from "./components/Section.vue";
export default {
name: "app",
components: {
Section
}
};
</script>
File: Section.vue
<template>
<div>
<img :src="img" />
</div>
</template>
<script>
export default {
props: {
img: String
}
};
</script>
I suspect that the issue is due to the relative path you are using. I assume that ../assets/linux.png resolves to the right image URL with respect to App.vue, but it actually needs to resolve to the right image with respect to your <Section> component.
Based on what I can tell from the code you've shared, It seems like you can solve this by updating App.vue as follows:
<template>
<div id="app">
<Section img="../../assets/linux.png" />
</div>
</template>
...
I should, however, point out that you are getting absolutely no benefit from passing the image source as a prop like this. Since it is not bound to a reactive data property in App.vue, you may as well just omit that prop altogether.
I have been using an <amplify-authenticator> component on the Home.vue view of a web application, via the HelloWorld.vue component. This was working as expected, with signedIn state monitored using store.js and Vuex.
I have now switched to routing to Home.vue or Login.vue depending on sign-in state.
However, when a signed out user correctly routes to Login.vue, the page displays as expected, minus the <amplify-authenticator> component. It is clear from the Styles that this is importing (amazonOrange is listed as a color), but for some reason the sign-in interface is no longer displaying correctly.
Login.vue
<template>
<div class="login">
<div>
<vue-headful title="Login"/>
</div>
<div>
<p>
<router-link to="/">Login</router-link> |
<router-link to="/about">About</router-link>
</p>
</div>
<div>
<p><img alt="Vue logo" src="../assets/logo.png" /></p>
</div>
<div>
<amplify-authenticator></amplify-authenticator>
</div>
</div>
</template>
<script>
import { Auth } from "aws-amplify";
import { AmplifyEventBus } from "aws-amplify-vue";
export default {
name: "Login",
props: {
msg: String
}
};
</script>
If I change amplify-authenticator to amplify-sign-in then I see a sign in interface, but this needs additional scripting to implement.
I'd like to know specifically why the Authenticator component isn't displaying, since I cannot see an obvious bug in my code.
Solved. If the user is signed in to Amazon Cognito, then the <amplify-authenticator> will not display. The problem was with a bug in the check on signedIn state, which was redirecting the user to the wrong page.