tag: Vuejs

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 - // store/index.js import Vue from "vue"; import Vuex from "vuex"; import user from "./user"; import account from "./account"; Vue.use(Vuex); export default new Vuex.Store({ namespaced: true, name: "global", modules: { user, account } }); My user store - //store/user.js import axios from "axios"; export default { namespaced: true, name: "users", state: { users: [], loading: false, error: "" }, mutations: { setUsers(state, users) { state.users = users; }, setLoading(state, loading) { state.loading = loading; }, setError(state, error) { state.error = error; } }, actions: { fetchUsers({ commit, state }, params) { commit("setLoading", true); commit("setError", ""); axios .get("http://myServer.com/api/get-users") .then(({ data }) => { commit("setUsers", data); }) .catch(e => { commit("setError", "Error fetching user records."); }) .finally(commit("setLoading", false)); } } }; Refer creating modular Vuex post if you do not understand this structure. ...

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. ...

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. Use Vue to design your site on top of Gridsome framework, and write your content in markdown, and generate complete HTML pages for your content that is complete in all respects. ...

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. ...