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/
Related
I'm trying to build my portfolio using Vue and Vue Router. What I'm trying to do is have a link in my navbar and when you click it, it will scroll down to that section. I have all my sections in separate components so I can't figure out how to make the scroll behaver function for everything. I have one Home.vue, and that component is the main component and all other components are included inside Home.vue.
Home.vue
<template>
<div class="home">
<HeaderSection />
<AboutSection />
<SkillsSection />
<TimelineSection />
<PortfolioSection />
<TestimonialsSection />
<ContactSection />
</div>
</template>
<script>
// # is an alias to /src
import HeaderSection from "#/components/HeaderSection.vue";
import AboutSection from "#/components/AboutSection.vue";
import SkillsSection from "#/components/SkillsSection.vue";
import TimelineSection from "#/components/TimelineSection.vue";
import PortfolioSection from "#/components/PortfolioSection.vue";
import TestimonialsSection from "#/components/TestimonialsSection.vue";
import ContactSection from "#/components/ContactSection.vue";
export default {
name: "Home",
components: {
HeaderSection,
AboutSection,
SkillsSection,
TimelineSection,
PortfolioSection,
TestimonialsSection,
ContactSection,
},
};
I just found a solution to this. in my Navbar i have an anchor tag <v-btn depressed plain text color="white"> Portfolio </v-btn> that points to the specific id in that component I want to move to <div id="portfolio"></div>. You can also make is scroll smoothly with document.querySelector(element).scrollIntoView({ behavior: "smooth" });
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'm testing out the Vuex store implementation in Nuxt and wondered whether the Store folder is now the best way of sharing components and modules, rather than with the Components folder?
For example, I currently call the header from default.vue in the Layouts folder with this code referencing the Components folder:
<template>
<div class="container">
<Header />
<nuxt />
<Footer />
</div>
</template>
<script>
import Header from '~/components/appheader.vue'
import Footer from '~/components/appfooter.vue'
export default {
components: { Header, Footer }
}
</script>
But, as far as I understand, if header.vue is in the Store folder then it can simply be called with the filename, like this below with no need to import or export it. Have I understood that correctly?
<template>
<div class="container">
<appheader></appheader>
<nuxt />
<appfooter></appheader>
</div>
</template>
No, the store folder should not contains components. Put your components only in components folder.
The store folder is only for modularizing Vuex.
If you don't want to write your import statement in each components, you can use nuxt-global-base-components. But I'm not convinced this is a good practice...
Also, be careful with your components name. Header and Footer are html reserved words. Name them AppHeader and AppFooter instead.
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.
From the docs:
Because v-if is a directive, it has to be attached to a single
element. But what if we want to toggle more than one element? In this
case we can use v-if on a element, which serves as an
invisible wrapper. The final rendered result will not include the
element.
But on my template in my component:
<template v-if="false">
<div>
....
</div>
</template>
But the component still renders.
I ask because I want a hook on the component so if v-if is true, I can do some code in beforeMounted and beforeDestroyed if false.
If I undestood what are you doing...
You're putting v-if int the template tag ina .vue file right?
Like this
// component.vue
<template v-if="false">
<div>
My Component
</div>
</template>
<script>
export default {
name: 'my-component'
};
</script>
<styles>
</styles>
Right?
If YES, you are doing it wrong.
The template there is a tag for Webpack Vue Loader to load the component template.
So the if must go inside the template tag.
// component.vue
<template>
<div v-if="false">
My Component
</div>
</template>
<script>
export default {
name: 'my-component'
};
</script>
<styles>
</styles>
If you need to "hide" multiple elements, just encapsulate into another div.
As Lucas Katayama said, you cannot use v-if inside SFC, but another way to hide you component is use v-if on this component in its parent component.
Your reference to the docs is correct, you can use a v-if on a template tag. However, I believe conditionals on the top-level <template> in a Single File Component are ignored.
To achieve the effect showed in the docs (conditional render a template) that template needs to be within the top-level template section.
Example:
<script>
// your script section
</script>
<template>
<template v-if="false">
<div>
....
</div>
</template>
</template>
<style>
// your style section
</style>