Vuex is a lot of boilerplate. Consider this user store - 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 //store/user.

Use helper functions to access Vuex capabilities and greatly increase readability of your code. We will consider the following Vuex store for a quick demonstration - 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 // store/index.js import Vue from "vue"; import Vuex from "vuex"; import user from ".

Vuex is my preferred way to manage state within Vue. Vuex is better structured using modules to make your code more readable and maintainable. See why you should use Vuex in Vue. Create a Vue app as you will always do using vue create myApp. Do a cd myApp && vue add vuex if you have not selected Vuex at the very beginning.

I love the simplicity, speed and awesomeness of static sites. I also happen to love Vue for its power, simplicity and its feature set that makes development that much easier. So, what will happen when Vue is combined with static sites? Awesome Gridsome - that’s what. Gridsome describes itself as a Vue-powered site generator.

Google recaptcha is quite a powerful tool in reducing spam through our contact forms. Once included in our forms, reCaptcha automatically manages suspicious activity, prompts additional ‘bot vs. human checks’, or is completely transparent to the overall flow - depending on who is interacting with the site. Including reCaptcha in Vue is quite simple.

In one of the recent projects there was this requirement to create a FAQ page for a small application. The change was not planned and came up during the final stages of the project. I took it in the same spirit as what I do for a home page. I did not plan to use SSR or a static-site generator, but rather leaned back on the excellent ‘prerender-spa-plugin’.

Recently I had to incorporate Google map functionality on list of contact cards. I though it would be interesting to outline a decision map of what went into the design and development. My first thought for the map functionality was to embed the map alongside the contact. This was quickly discounted since we had too many contacts on the same page (with a possibility of infinite scroll in the future).

You can do the following in a password box to hide or show passwords on click. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <template> <v-text-field name="password" :value="myPass" label="Enter password" :append-icon="value ? 'visibility' : 'visibility_off'" @click:append="() => (value = !

There are two ways to conditionally show or hide UI elements in Vue - v-show and v-if. Learn which option to use where. v-show Use v-show to show an element on the UI based on given condition. The element is present in the DOM, but will have class set to display: none.

Vue supports two-way binding through the excellent v-model directive, and one-way binding using a :value= syntax. Both have their uses within a Vue component. There are good enough reasons to use one over the other. First, let’s look at an example of two-way binding - 1 2 3 4 5 6 7 8 9 10 11 <template> <input v-model="message" /> </template> <script> export default { data() { return { message: "hello" }; }, }; </script> v-model is a short form of v-bind.

There are three main ways to store variables and/or react to variable changes in Vue components. data computed Watch for changes in watcher So, how to decide when to use what? (that is 3-in-1 question, I outwit myself) Although these sections look similar, they serve different functions. Evaluate the variables against the following considerations when you are in doubt.

Vue provides one excellent way and three other alternative ways of getting your components to work together to form one beautiful, seamless application. Let us look at them one by one :) 1. Vuex Yesterday we talked about Vuex and how we (try to) manage vuex variables and local variables in a Vue component.

Vuex is quite a powerful way of storing variables and sharing them across components, but where do you draw the line? Which variables do you store locally and which of them are shifted to Vuex store? This is the advise I often come across - Get your variables in store; keep component clean and consider future reuse Don’t overdo Vuex.