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.
Related
this is a question about best practices, in short: what is the best way to implement this function
I used the vue cli to create a project to train on. And so the normal template it provided me with was a side header thing with the content on the side, and so I made some modifications:
the issue is visualized down if the text explaination wasn't clear
and so what I had in mind was to add a slot in the header "the left side" to add the adding button, and the button wouldn't need to be visible in the other tabs, like the help tab.
App.vue
<template lang="pug">
TheHeader
routerView( v-slot="{ Component }" )
transition( name='slide-fade' mode='out-in' )
component( :is="Component" )
</template>
but here comes the issue, as you can see the tabs are in router views and the router view is beside the header component. the solution I had in mind was to:
add a list of strings in the App.vue with ["help", "course", ...] in the script section
the strings are linked to what router is being used (not very sure how to do this but I guess I could do a v-model to the v-slot being used)
pass the string to the header component
include a v-if statement with every tab's little widget
but I felt like this alone will jank the code a lot and thought if maybe there was an easier way to pass an entire component from one child to another it would be great. if there isn't I'd just like to know if it's the best practice I could do and proceed with this solution
issue visualization:
wanted behavior mock-up:
the solution was to use the Built In <Teleport> Vue component. this way I just type <Teleport to="..."> and it will go where I want
In this doc I found that I can customize our CMS templates, slots and components:
Data-driven outlets are provided by the CMS structure. There are three types, as follows:
CMS Page layout name: Each page layout is available as an outlet reference.
CMS page slot positions: Each slot position is an outlet reference. Since slot positions are not necessarily unique throughout the CMS structure, an outlet template might occur more then once. There is currently no standard technique available to limit the outlet for a specific position or page.
CMS Component type: Each component type is available as an outlet. While component type-driven outlets can be used, it is generally considered best practice to leverage Customizing CMS Components for introducing custom component UI.
Could you please provide any example how to do that with outlets if I have next custom structure:
<main>
<cx-page-layout class="AccountDetailsPageTemplate">
<cx-page-slot class="BottomHeaderSlot"></cx-page-slot>
<cx-page-slot class="AccountMenuSlot"></cx-page-slot>
<cx-page-slot class="AccountContentSlot"></cx-page-slot>
</cx-page-layout>
</main>
As result I would like to have next layout view:
I know how to do that using global styles only, but preferably is to use templates (outlets), because it can be the case when we require to add some extra parent div's over the slots and so on.
To build such structure with provided set of Slots, we can do next:
app.component.html (REQUIRED)
<ng-template cxOutletRef="AccountDetailsPageTemplate">
<app-account-details-page></app-account-details-page>
</ng-template>
account-details-page.component.html
<h1>
Hello AccountDetailsContentSlot
</h1>
<div class="d-flex">
<div class="w-50">
<cx-page-slot position="AccountMenuSlot"></cx-page-slot>
</div>
<div class="w-50">
<cx-page-slot position="AccountContentSlot"></cx-page-slot>
</div>
</div>
I didn't put here BottomHeaderSlot, because it should't be here, it should be implemented in cx-header component.
I'd like to use the md-card material from Vue Material in an existing application. The example on the website (https://vuematerial.io/components/card/) uses the following:
<template>
<div>
<md-card>
...
</md-card>
<md-card md-with-hover>
...
</md-card>
</div>
</template>
When I use this in the HTML page and create a Vue object for the containing div, the components do show, but the layout is not working. I have tinkered with the layout classes, but the behavior is not matching the example. How can I configure the layout in a plain HTML page to match the example's layout behavior? Is the example page adding another layer to the example div to create the layout behavior?
Updated: I tried a similar scenario in JsFiddle, and it works perfectly: https://jsfiddle.net/w9m6q05f/3/ . In my application, the cards are always in a column regardless of the width of the view, and the bottom card is stretched towards the bottom of the view. Do I need to set the class of the containing div? It may be getting overwritten by my application somewhere else.
Update 2: The culprit is which has height: 100%
Vuetify has a pretty flexible layout scheme encompassing a menu, toolbar, content, and footer, that allows some nice-looking material design schemes, e.g. Google Contacts:
Consider a standard setup with the layout being controlled by the router, with a fixed menu across the site, but a dynamic toolbar that changes with the page shown. What's the best practice for changing the content of the toolbar depending on what page is shown? In the Google Contacts example, we only want the search bar to show up on the Contacts page.
Based on my rudimentary knowledge of Vue, it seems like defining a router layout with a scoped slot. There are likely a lot of other hacky ways to achieve this. But I'm looking for a clean, modular way to define toolbar content across pages.
Ideas:
As of a while ago vue-router didn't support named slots. But this seems to have changed recently, although there is no documentation.
Named views seem to be a nice way to support tie the toolbar content to the main page with vue-router. But there doesn't seem to be a good way for the toolbar to 'talk' to the main page as there would be with a slot.
You can define multiple router views in your application. Imagine your layout looks extremely simplified like this:
<v-app id="app">
<router-view name="navigation"></router-view>
<router-view></router-view>
</v-app>
Then you can define a route with components for both router views:
{
path: '/hello',
components: {
default: MyHelloComponent,
navigation: MyNavigationForHelloComponent
}
}
Documentation
Working Example from Documentation
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>