I have to build 3 different pages and each page has a different toolbar.
I know that in app.vue the head section is rendered and the components should be the body so it would make sense to only have the toolbar in the app.vue section but the problem starts when I have 3 different toolbars when I call the 3 components.
Whats the correct way to do this? Should I have the toolbars in the components themselves even though its going to be rendered in the main section, or should I somehow, dynamically load the different toolbars on app.vue as I load the components?
this is a "representation" of I want to achieve.
Page1.vue -> toolbar 1
Page2.vue -> toolbar 2
Page3.vue -> toolbar 3
I had something similar task and what i did:
Make component-wrapper <MyToolBar /> and in it use:
<component :is='computedComponent'></component>
In this component u should just import yours toolbars.
If u use a vue-router, u can use hooks to listen page route.
Or u can use props.
well, i don't know is it the right solution, but it worked in my case
You could potentially make use of slots if there isn't any major differences between the toolbars. Read more about them here. Hope this helps :)
Related
I'm building a Nuxt app with a layout that consists of 3/4 main content and 1/4 sidebar navigation that uses tabs that expand based on the current route.
My aim is to essentially have two router-views — one on the main page and one in each tab.
With the Vue Router I guess this would be possible to achieve via named views e.g.
<router-view name="rightSidebar"></router-view>
But obviously with Nuxt the idea is that the routing is taken care of behind the scenes...so it isn't possible to configure.
But none the less is it possible to use <NuxtPage /> in this way?
Nuxt.js does not support the router-view. However, you can use the NuxtPage inbuilt component. Just remember that it only works after the pages you are trying to nest have been added in the pages directory.
Here is a link to an overview of it from the Nuxt docs.
I am trying to accomplish something that I am not sure is possible or semantically good. I am building out a personal portfolio website and I liked the idea of a full page navigation where each link transitions into a 90% view and the router view loads in that space(See codepen below for transition example). I've stripped out the main router-view from my codesandbox. I am wondering maybe I need named router views?
Another thing I'd like to know is if I could keep the html semantic at all if I basically inject a main tag directing after a nav link? There has to be a better way than how I am doing this. I just need to step back and look at it differently.
CodeSandBox Portfolio:
CodePen Tester for Navigation Transition (I will probably do this a different way using Vue transition components)
See the Pen Portfolio Nav Tester by CJ Haviland (#cjhaviland) on CodePen.
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 am just getting started with vuejs and after following a course on udemy I feel ready to dig in. To get started I need some pointers.
Take a look at this screenshot:
I have created a component call it example, when I click on the component I need on the left side of the component to show the settings for just that component. If I change those settings they should only be changed for selected component. If I select the second component settings with its own values should then be displayed to the left.
What is best way to do this? Sidebar on the left should only be visible if the component is clicked/selected. So I am guessing that the sidebar component which we can call settings should be a child of example component so that I can comunicate with this when it should be visible or not.
My question is how do I position the child component to the left like I have "mocked up" on the screenshot. Is it possible to copy settings component html into the left sidebar each time I click an example component?
How would you implement something like this?
I'm using angular 2 in my web application.
My application uses a lot of bootstrap modals.
I noticed that the modals contained inside a sub-route component are not showed correctly.
Infact, the modals contained inside the navbar element (the navbar is in the main state and always visible) are shown correctly, but those that are contained in the sub-route (so the html is loaded dinamically) present a bug... the shadow seems to be above the dialog itself, so it is impossible to press the buttons.
This is a screenshot:
As you can see the backdrop is above the dialog. This happen only on mobile devices.
What am I doing wrong?
I would avoid to keep all the modals inside the navbar and then open them with global events...
Thanks a lot
EDIT: I found this document:
If the modal container or its parent element has a fixed or relative
position, the modal will not show properly. Always make sure that the
modal container and its parent elements don’t have any special
positioning applied. The best practice is to place a modal’s HTML just
before the closing </body> tag, or even better in a top-level position
in the document just after the opening <body> tag. This is the best
way to avoid other components affecting the modal’s appearance and
functionality.
But is this the html of my modals (a lot of modals) is always in the dom. Isn't a heavy solution?
I fixed the problem using the following javascript code:
$('#myModal').appendTo("body").modal('show');
Thanks to Adam Albright for his post.