On _collection.vue I have something like
<div>
This is a collection
<NuxtChild />
</div>
And inside of category > index.vue I have content like
<div>
This is a Bicycle Page
</div>
If I go to http://localhost:3000/collection/bicycle
It will only show This is a Bicycle page but it will not show the parent layout.
What am I doing wrong?
Isn't _collection.vue the parent of anything inside of the _category folder? Shouldn't everything _collection.vue show in addition to the child components?
Here _category and _collection are at the same level, so it's basically one of them.
You cannot have 2 variables at the same time, it's like asking: "what is my variable: X or Y?".
You can have only 1 dynamic page, especially at the same level. If you want to have /collection/bicycle, then collection directory and _type.vue (for bicycle) inside of it should be enough.
I think you have mixed up the concepts of pages, components and layouts here.
If you are trying to set up a layout that is applied to each page in pages/collection, you could make use of an actual layout.
If you are trying to display a particular piece of content on multiple pages, you should use components.
Further information around nested route handling.
Just change a _collection.vue to index.vue If you want to have collection path as dynamic value, change folder name to _collection. And as kissu wrote you in a comment, you have two routes at the same level, so it reads just one. All you need to do is change _collection.vue file name if you don't need a flexible route.
Related
I'm trying to create a form that I want to use modularly by linking to it from multiple page templates. Using just the straight vue-cli I would simply create a route to the file that has the form defined that I store in the "components" directory and then wrap a button linking to the form in a <router-link to="componentFormName"><btn></btn></router-link>. I'm having some difficulty determining how to do the equivalent in Nuxt. Any insights would be greatly appreciated. It seems the <NuxtLink></NuxtLink> only works with Vue files in the "Pages" directory.
You probably want to use dynamic components here: https://v2.vuejs.org/v2/guide/components-dynamic-async.html#keep-alive-with-Dynamic-Components
With something like this
<component :is="currentTabComponent"></component>
With currentTabComponent being one of the component to mount. You can mount a component depending of the current route with a relation between the URL and the component name too.
Also, Vue does not have any knowledge of "route", and everything is a component. Nothing really changes with a page because it is also a component at the end of the day. Or you could write one inside of it.
Maybe an example of your use-case would be helpful here.
Our business logic allows different types of profile pages (user profiles, company profiles, etc - each with its own template), but the URLs do not discriminate between the types of profiles. All URLs are of the format:
mysite.com/{{ profile-vanity-alias }}
How would a vue-router configuration determine which component to render? e.g.
mysite.com/zuckerberg should render a user profile page
mysite.com/facebook should render a company profile page
mysite.com/jeffbezos does not exist so it should render a 404
mysite.com/companies/usa should render a different page with a list of companies from USA (/companies/:country? is a known route that can be hardcoded)
Furthermore, we're also considering to use vue-ssr (for SEO); I never really used SSR, so that's something where I wouldn't know where to start - a few pointers would be extremely helpful!
Thanks!
you can use switch logic to determine which component you need to load, then dynamically load the component.
<component v-bind:is="component" />
Maybe you can look into detail with this article. https://blog.logrocket.com/how-to-make-your-components-dynamic-in-vue-js/
The route path is obviously something like /:profile. I would have a generic parent component that responds to that route and loads the corresponding profile object (from the API, etc) and, based on some flag or other criteria, it displays the profile component of the person or the one of the company - and here a dynamic component might play a role.
As a short sketch, in the parent component I would have:
<div>
<user-profile v-if="currentObject.isUser" :id="currentObject.id" />
<company-profile v-if="currentObject.isCompany" :id="currentObject.id" />
</div>
I am actually building a SPA with foalts.org.
I have placed my script.js inside the public folder. Unfortunately, this doesn't allow me to use typescript for my vue-js. Maybe someone has an idea for this, cause actually the public folder got served from foalTS framework. But this is actually not the main topic.
The maintopic is, that i want to list several divs with
<div class="row-position" v-for="order in orders" :key="order.latestPrice">
<div id="myAMchart></div>
</div>
Now I would like to be able to place an amChart (https://www.amcharts.com/) for each div. And I want that these charts follow the value of order.latestPrice. But I actually have no idea how to set up this with amCharts and vue.js
Im open to any ideas.
I was able to update one single chart but with a fixed id of the div.
I don't know how to connect the many different (dynamicaly generated) charts to the order.latestPrice field.
Thanks!
I have a website consisting of a Sitemap like this:
Home
About
Golf
-- Course one
-- Course two
Work
-- Work one
-- Work two
Contact
So Work.vue is laid out like this
<header></header>
<carousel></carousel>
<work-one</work-one>
<work-two></work-two>
<footer></footer>
My question in my main navigation above if I click the sub navigation item Work two how I then go to the Work page and scroll to the Work two component or even better if the work two component would load first and the work one component would load under it.
Really hope I am making sense but basically I want to be able to link to specific parts of a vue Page component which contains other components also.
Thanks
If I understand you correctly, this doesn't really have much to do with Vue or Vue router as it does simple html.
You can use anchor tags for this (http://www.echoecho.com/htmllinks08.htm):
Simply put, in each components html have something like
<a name="work-one"></a>
Then, when you want to link to that specific component on that page, you can do:
Link Text
Or the Vue Router way:
<router-link to="yoursite.com/your-main-page-link#work-one">Link Text</router-link>
I'm trying to wrap my head around how "inner components" can adjust the content of "outer components". Let's say I have an application template that looks something like this:
<template>
<div class="sidebar">
<div>Some app-wide content</div>
<div>
<!-- I want to put some view-specific content here -->
</div>
</div>
<div class="main-body">
<router-view></router-view>
</div>
</template>
Each subview wants to render different content to the sidebar. Obviously this would be easy if the subview included the sidebar area itself, but let's say it is important to preserve the structure and we don't want to replicate the boilerplate of the sidebar across every view.
Is there any way for a child view to declare "export this extra component for display in another place?" I imagine something like injecting the parent view and calling a method on it, but I can't figure it out from the documentation.
Simple demo:
It's fairly simple, actually. Just import and inject your sidebar or any other viewmodel and call a method or update a property.
https://gist.run/?id=745b6792a07d92cbe7e9937020063260
Solution with Compose:
If you wanted to get more elaborate, you could set a compose view.bind variable to that your sidebar would pull in a different view/viewmodel based on the set value.
https://gist.run/?id=ac765dde74a30e009f4aba0f1acadcc5
Alternate approach:
If you don't want to import, you could also use the eventAggregator to publish an event from the router view and subscribe to listen to that event from your sidebar and act accordingly. This would work well for a large app setting where you didn't want to tie them too closely together but wanted the sidebar to react correctly to unpredictable routing patterns by always responding when triggers were published.
https://gist.run/?id=28447bcb4b0c67cff472aae397fd66c0
#LStarkey's <compose> solution is what I was looking for, but to help others I think it's worth mentioning two other viable solutions that were suggested to me in other forums:
View ports. You can specify multiple named router views in a template and then populate them by passing in a viewPorts object to the router instead of specifying a single moduleId. The best source of documentation is a brief blurb in the "Cheat Sheet" of the Aurelia docs.
Custom elements. It's a little more "inside-out" but you could define most of the outer content as a custom element that has slots for the sidebar and the main body; each child view would define this custom element and pass in the appropriate pieces.