I submitted a question to the github for gridsome but haven't had a reply yet so wanted to re-post here.
Please keep in mind that this is specific to GRIDSOME framework for vue js
Github question: https://github.com/gridsome/gridsome.org/issues/542
Question
HI Guys,
I've been playing around with Gridsome and have come to a fork in the road which from the Docs I have not found a solid / clear answer - maybe its implied, but not stated (or possibly I am being an idiot - this is also common)
Girdsome page names:
Can you set a page name to a page in gridsome?
i.e.
Why is this needed:
On the user clicking a component I use this.$router.push(name: X, props: { X: X}) to change the page
I pass an object as a prop to the new page
I did try to use the pages PATH instead of the name but it was unable to pass the prop when doing so
I can add the name manually to the routers.js file in the .temp folder - however if I add a new page - this is then wiped
Am I not using gridsome as it should have been intended? is there a way to add a name to a route?
Passing data to different pages
The above question has seemed from me needing to pass an object with data to different pages as a prop - but gridsome used GraphQL so is it intended that you use GraphQL on each page to get the data for that page and instead should not pass variables?
Any help on clarifying this would be great -
Thanks in advance -
W
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.
I'm making an app using VueJS and Framework7, and I'm having trouble understanding how to apply dynamic route matching to my app.
My app has two pages, main view and info page. On the main page, there is a list of links that all lead to the info page. However, the links are generated from API data, and I wish to do the same on the info page. What I'm trying to do is pass the id parameter from the API data into the link address, so that it's stored in there even while I load the same info page template. Using that id, I'd like to identify which data to print on the info page from the API data.
Here is my link element:
<f7-list-item v-for="lowerBoss in lowerBosses" :key="lowerBoss.id" :data="lowerBoss" class="single-boss subheading white" link="/boss/lowerBoss.id" onclick="console.log(lowerBoss)">
{{ lowerBoss.name }}
</f7-list-item>
So here I am trying to pass the id from the lowerBoss object into the link address and key. I tried to console.log the object as well, but whenever I click on this link, I get an error saying lowerBoss is not defined.
I am aware that I should most likely be using router-link for this, but I had trouble getting that to work - the links would not work wherever they led. Besides that, I had the same issue with them too.
The answer above is right. You have to remmeber, that every property that written as usual <component link="some-link/object.id"></component> will not be parsed, but will be passed as string. So you have to use :link="'/bla/bla/'+object.id".
lowerBoss will be available inside f7 component as "data", because of :data="lowerBoss" this part of your tag.
Check this Vue.js Passing Static or Dynamic Props
To handle events you have to use vue.js directives Event handling
Try as below
<f7-list-item v-for="lowerBoss in lowerBosses" :key="lowerBoss.id" :data="lowerBoss" class="single-boss subheading white" :link="'/boss/'+lowerBoss.id">
{{ lowerBoss.name }}
</f7-list-item>
This question triggered in my mind while reading through Vue's official guide here.
I don't know if I find the answer to this question on proceeding further to read more from the official guide, but curious to know if it's possible or not.
Well, I'll update here as soon as I got to know the answer.
Screenshot from official guide
A component must use a single template or component option object, and that template must provide a single root element to mount. The template is converted into a render function internally, and Vue can only have 1 render function.
Your component can in turn contain a component that is dynamic, however.
https://v2.vuejs.org/v2/guide/components-dynamic-async.html
I am currently developing a web application that is used to display elements for events on a map provided by HERE Maps. I am using Vue.
I have some components, but the relevant component is the component HereMaps.vue which initializes the map using the HERE Maps Api.
The HERE Maps Api provides the possibility to place so called InfoBubbles on the map showing additional information. These InfoBubbles can be provided some HTML-code in order to customize their appearance.
Please refer to the documentation for additional information
Following the documentation the code looks something like this:
let bubble = new H.ui.InfoBubble(marker.getPosition(), {
content: "<div class='someClass'>Some Content</div>"
});
this.ui.addBubble(bubble)
This is happening after mount in the "mounted" method from Vue in the "HereMaps" component.
The Bubbles are added in a "closed" (hidden) form and dynamically "opened" to reveal their content when the corresponding marker icon on the map is clicked. Therefore the HTML-code is present on the DOM after the component is mounted and is not removed at a later stage.
Now instead of supplying custom code within each bubble added to the UI i want to just add a component like this:
let bubble = new H.ui.InfoBubble(marker.getPosition(), {
content: "<myDynamicComponent></myDynamicComponent>"
});
this.ui.addBubble(bubble)
It does not matter to me wether the component is initialized using props or if it is conditionally rendered depending on the state of a global variable. I just want to be able to use the "myDynamicComponent" in order to customize the appearance in a different file. Otherwise the design process gets very messy.
As far as i know this is not possible or at least i was not able to get it work. This is probably due to the fact that the "myDynamicComponent" is not used within the "template" of the "HereMaps" component und thus Vue does not know that it needs to render something here after the directive is added to the DOM in the "mounted" method.
This is what the InfoBubble looks using normal HTML as an argument:
This is what the InfoBubble looks using the component as an argument:
It appears to just be empty. No content of the "myDynamicComponent" is shown.
Does anyone have any idea how i could solve this problem.
Thank You.
Answer is a bit complicated and I bet you wouldn't like it:)
content param can accept String or Node value. So you can make new Vue with rendered your component and pass root element as content param.
BTW, Vue does not work as you think, <myDynamicComponent></myDynamicComponent> bindings, etc exists in HTML only in compile time. After that all custom elements(components) are compiled to render functions. So you can't use your components in that way.
Give us fiddle with your problem, so we can provide working example:)
I'm very new to Joomla. I have a question about components/modules.
I'm doing the development of a site for a firm and they provided me with custom news releases component that's supposed to show on the home page. From what I've seen, I can call modules to a page with "" based on their position.
Do I do the same sort of thing to get this component to display? Can anyone help me out please. Let me know if I'm not being clear.
EDIT: I figured out that I have to add this as a menu item, but this makes it into it's own page. I want this just as a module on the right of the home page. What do I need to do to achieve this?
Thank you
if this is a component than you won't be able to display it in a module position. You will have to write a new module to do that or use some modules which wrap around other types of content. See here, maybe this plugin will fit.
If this is a component you can also use the Component Loader extension to load the component output in a module position.
http://extensions.joomla.org/extensions/core-enhancements/embed-a-include/10721