I want to load 3 Components at a time like that:
<app-header />
<app-main />
<app-footer />
But I want to load Router View also in this page.
<app-header />
<router-view />
<app-footer />
While I will click on the router-link then <app-main /> will be vanish and <router-view /> will be visible.
Is there any better way to handle it without if or show?
You can pass router-view via slot to your app-main component like this:
<app-header />
<app-main>
<router-view/>
</app-main>
<app-footer />
Also you need to insert a slot tag in your app-main component like this:
<template>
<!-- your code -->
<slot></slot>
<!-- ... -->
</template>
For more details visit https://v2.vuejs.org/v2/guide/components-slots.html
Related
I'm facing an issue with nuxt 3 where when I deployed my website using SSG, the first route which is the index route loaded 2 components so for example
if I had index.vue like this
<template>
<Component1 />
<Component2 />
</template>
it would show like this
<template>
<Component1 />
<Component1 />
<Component2 />
<Component2 />
</template>
and this only applies to the main route (/) and when I switch to any other route then come back the problem seems to be fixed but when I refresh it always generates double components.
I switched after vue 2 to vue 3 and I can't understand why doesn't display anything inside and how can I make it work
That's how it works
<template>
<component :is="layout"></component>
<router-view />
</template>
That's not how it works
<template>
<component :is="layout">
<router-view />
</component>
</template>
I currently have duplicated layout that the only difference is a prop I pass to a component:
default.vue
<template>
<div class="page">
<SkipToContent />
<Header />
<Nuxt />
<Footer />
</div>
</template>
front.vue
<template>
<div class="page">
<SkipToContent />
<Header light="true" />
<Nuxt />
<Footer />
</div>
</template>
Is there any way to pass that light: true from page to layout so I can use only default.vue layout?
I know I could emit some event on mounted but would like to prevent using lifecycle hooks
Passing data up from a child is ideally done by emitting events, and you don't need to use lifecycle hooks for that (a custom event listener would work).
But I think a cleaner solution would be to factor out the common markup into a component that receives a light prop, and use them in both layouts:
<!-- components/CommonLayout.vue -->
<template>
<div class="page">
<SkipToContent />
<Header :light="light" />
<Nuxt />
<Footer />
</div>
</template>
<script>
export default {
props: {
light: Boolean,
}
}
</script>
<!-- layouts/default.vue -->
<template>
<CommonLayout />
</template>
<!-- layouts/front.vue -->
<template>
<CommonLayout light />
</template>
demo
I have a global sidebar component TheSidebar.vue:
<template>
<aside>
<slot></slot>
</aside>
</template>
In Blogs.vue (a page component) I try to register two components.
<template>
<div>
<h1>Experiences</h1>
<TheSidebar>
<SearchBlog />
<CategoryCheckboxFilter />
</TheSidebar>
<ExperienceList />
</div>
</template>
It seems like I cannot register two components in a slot?
Is this a good setup anyway and who do I have to achieve this?
Update
It's just working fine now and I can register more than one component in a <slot />. I think some webpack building issue before.
I am design an Vuejs app which page render based on route.
e.g. for
route = /, Component = Main.vue
<template>
<div>
<toolbar :user="user"></toolbar>
<app-content></app-content>
</div>
</template>
route = /:user, Component = User.vue
<template>
<div>
<toolbar :user="user"></toolbar>
<userHeader></userHeader>
<app-content></app-content>
</div>
</template>
When the page is show, the toolbar component will fetch data from server, the problem is, when the page go from / to /user, the data fetching data X 2 because that are 2 toolbar components in the app itself.
How should resolve this issue ? is that any way to reuse share component instances like toolbar ?
or should i put the design in one whole component instead ? ( use v-if to show hide the additional component)
You should be having <toolbar /> outside of <router-view></router-view>.
So your code should look like:
<div id="app">
<toolbar user="user" />
<router-view />
</div>
With this <toolbar /> won't change even if you change your routes, and will result in data fetching for a single time only.