my app consists of:
6 components in component folder,
3 JS files in library folder.
inside of component_1 I have a Layout with ref myLayout,
one of those JS files myLayoutHandler manipulate myLayout (animate it or other stuffs) , when this JS file runs inside component_1 it works. ( it uses : this.$refs.myLayout.nativeView and this is my problem ) but when it runs inside other components due to the this.$refs. it will not find the myLayout.
So how can I access myLayout all over the app? Is there something like: global.$refs, or some method like getElementbyId?
You may always use the {N} way of identifying elements. Use id instead of ref and call getViewById(yourId) on the Page instance.
The current page can always be accessed from any element Or frame.
Edit:
If you prefer Vue way of accessing still, you may use $root or $parent, but for every parent above the current component, you will have to chain them.
Related
Currently when importing components from another file to be used inside the template part, if the name of the component is not correct, Vue just gives a warning about this. Is there any way to configure it so that it errors during compilation or building, so that it is easier to do refactoring or moving around components, since in Nuxt, we can enable auto-discovery component, just that we need to include the directory it is in as well as part of the component name. For example, if I have a component named PhoneNumber inside base folder inside components folder, I can use that component directly by using BasePhoneNumber.
I have tried disabling the auto-discovery component in Nuxt, and I got a lot of this unknown custom element as expected. But this only triggers the warning, which I can only see the warning when I'm browsing that page. So there's a big chance of making a mistake where I update the name of the component in one page, but another one in another page is missed
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 have a header on every page thats generally static — besides the button that needs to update based on the page. Ideally I would like to have a variable called link in static/content/xxx
and then to call it from layouts/default. However it does not seem that I have access to any of the variables in my static content. Being new to vue and nuxt I was hoping for some guidance. I tried using asyncData however, it doesn't seem to get called at all in my layout.
a layout is a static wrapper that will wrap your main content. the main idea behind using layout is to not write the same content again and again. If you work with Vue only project than this type of functionality can be accessed by the using the child routes.
just add the common layout as the parent Component and the changed or different content as the child components.
back to the point, if you have different button content depending upon the pages than don't place it in the layout instead pass through the components individually.
whereas the static folder in the nuxt application holds the data that should not be changed such as the css files or external script files just take and example of bootstrap and jquery these are the libraries that are embeded in the application, instead of changing their internals we just use them. this type of content is placed in static directory (folder)
I hope it helps
I have an application in vue with typescript. I saw when I use import to load component then I got component-bundle with all the code of component inside.
I wonder if should I do this for every component I want to load, for example: I have app.vue inside I have toolbar.vue and drawer.vue. in my router components I have others vue components.
What I'm afraid that gonna happened is app.js is loaded then components inside the route definition(500k), then I get the toolbar component (1.5mb). and I'll get flashing screen weird.
So, should I use splitting bundle for every component in my app?
You can do code splitting if you are not expecting that particular component to be re-used for every page.
Take for example the Header and Footer component. Since they will be used in almost all of the pages, there is no reason to code split as you want it to be loaded along with the bundle for all pages.
Take for example you have a component where it has a Blog Widget. This component will only load in the /blog page. Therefore, this is a good use case to be using code splitting as you do not need the Blog Widget to be bundled in other pages except in the /blog page.
I can only provide you with a generic answer and using the Header and Footer components are the best way to express different use cases. As for the rest of the components, you have to decide for yourself if it is worth to code split or not.
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:)