Use Vuex to avoid multiple requests from different components

JavaScript is asynchronous, it’s big advantage, but in some cases, also a big problem. The most popular mistakes relate to AJAX requests. Many people trying to do something before there is a response with data, and it cannot work. Now we can use many comfortable tools, and don’t have to remember about that – one of them is async/await. But sometimes, it can be still a problem. Let’s say, we use Vue, have one page with multiple similar components. Each of them needs some data from the same API endpoint, and calls request. In that case, we can’t use async/await, because there a lot of completely separate components. How can we avoid multiple requests then? There are few solutions, one of them is to use Vuex and this post is about that. 

Continue reading “Use Vuex to avoid multiple requests from different components”

Vue – v-model with two-way data binding in custom component

Vue offers very nice binding and events system. We can create component, set some data using props, and also emit events from that component. If you read official Vue documentation, you can see examples for some standard form inputs. These examples using v-model and allows two-way binding without any additional code and without creating methods for events in parents – of course, we can still watch data from v-model. Can we use v-model way also in our custom components? Yes, it’s possible and very simple to do. See some examples.

Continue reading “Vue – v-model with two-way data binding in custom component”

Vue dynamic, async components (lazy load)

Vue is very nice framework that allows us to simply and quickly create apps. After many many hours and after hundreds of lines, our app can be big, really big. It’s bad for user experiences, because of long loading and delays. If we use a lot of components and many of them are rendering conditionally, we can load them asynchronously, as other chunks. How do this? It’s very simple, we must just import required files not always, but only on demand – something like lazy loading. Everything is build-in, so we only have to make only few small changes.

Continue reading “Vue dynamic, async components (lazy load)”

Vue-fragment – many components inside template

Vue is very nice JS framework with – in my opinion – very clean and simple structure. It’s separate HTML, CSS and JavaScript, in effect it’s much cleaner than React. But Vue is not ideal, and sometimes its limitations can be strange and annoying. Good example is that we must use only one child elements on every component. It doesn’t matter in many cases, but try to render table with some child components and conditions – I promise you, it will be real nightmare.

Continue reading “Vue-fragment – many components inside template”

Vue.js – global event bus

Vue is very nice JavaScript framework – fast to use and with clean code. Most of rules are logical and easy to understand, but some limitations may be strange and problematic. One of them is one-way data flow. We can pass data from parents to child elements automatically, but in reverse, use only events data. Sometimes it may be an issue, because we have nested components structure and would like to send event to top level parent.

Continue reading “Vue.js – global event bus”