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. Create a store folder in the src folder of the Vue project. This will be the root of all Vuex. Create an index file to initiate store. ...
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. 1. Install vue-recaptcha-v3 Install the NPM package called ‘vue-recaptcha-v3’. This will enable us to just plug and play recaptcha rather than including the 4-5 lines of code provided by Google. ...
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’. prerender-spa-plugin will take care of pre-rendering the content, and I don’t need to worry on the performance or the SEO side of things. ...
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). Although I could lazily load maps, one too many map requests did not make a lot of sense when all the user wanted did was to search and open a specific contact. ...
You can do the following in a password box to hide or show passwords on click. <template> <v-text-field name="password" :value="myPass" label="Enter password" :append-icon="value ? 'visibility' : 'visibility_off'" @click:append="() => (value = !value)" :type="value ? 'password' : 'text'" ></v-text-field> </template> <script> export default { data() { return { value: String, }; }, }; </script> Password is captured in a v-text-field element and we are doing a couple of things here - Use ‘show’ or ‘hide’ icons based on whether password is shown in plain text or as a hidden item (append-icon). We use type to be password or text to achieve this Show or hide password when user clicks on the appended icon The end-result - ...
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. This hides the element from user. Any scripts or back-end manipulation can still access the element. <template> <span v-show="isTrue">Message</span> <span v-show="showMessage = true">Message</span> </template> v-if ...
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 - <template> <input v-model="message" /> </template> <script> export default { data() { return { message: "hello" }; }, }; </script> v-model is a short form of v-bind. The above statement is equivalent to - <!-- ... code --> <input v-bind:value="message" v-on:input="message = $event.target.value" /> <!-- ... code --> When you change message in input box, the variable value will change. If an external logic (or a computation) changes message, the input box value will change. So 2-way binding literally binds the DOM element to the variable value in ViewModel (you do remember that Vue is MVVM, don’t you :)). ...
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. Description Data Computed Watcher Store variables Store local variables Computed variables. Can be static, derived from other variables, or can be static functions Does not store variables - only watches them. React to variable value changes Y Y Y Cached? Y Y N/A Scope Local to component Local to component, but can derive/make calculations with variables from props, store, etc. Can watch local or store variables and react to changes Can be referred by <template> Y e.g. {{ myName }} Y {{ myCalcName }} N/A Can be referred by <script> methods Y this.myName Y this.myCalcName N/A Perform action when value changes N N Y Consequence of a value change Change UI to react to change Change UI Perform action - local/vuex Can change other variable values N Y Y See examples below. ...
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. What we did not talk about was how Vuex is the most effective solution for all inter-component communications. ...
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. Apply judgment and use store judiciously I find that the code I write oscillates between the two with no practical standard that I can apply across the team. ...