Techformist

Lazy load components as a general practice

📅 Jan 25, 2019 · 📝 Jun 9, 2020 · ☕ 3 min read

Vue allows us to build out infinite blocks of components that can work together or build on top of another to provide UIs of increasing sophistication. You may have a page or view that loads dozens of components including fields, tabs, charts and so on, and the loading of such components is automatically taken care by Vue.

I love search function in Vuetify data tables

📅 Jan 24, 2019 · 📝 Jun 9, 2020 · ☕ 2 min read

Search in Vuetify data tables is just beautiful. Define a data table and a search is readily available for you. What else can a human ask for? In fact, data tables were the single biggest reason for me to choose Vuetify about an year back. My long term association with data-driven application means that I am ever-so-dependent on the data table functionality.

Wait for User to Stop Typing in Search Fields on Vue UI

📅 Jan 23, 2019 · 📝 Jun 9, 2020 · ☕ 2 min read

Let us see how we can easily accumulate requests when user types in a search (or auto-complete) fields and collate them in one go. When implementing the ‘instant search’ fields in Vue, the cycle of events is pretty standard - User keys in characters System keeps getting those characters and sending them to the server for processing System reacts to changes from server and displays search results The same cycle repeats for fields include auto-complete that take user action and return stuff from server.

Format Data Using Vue Filters

📅 Jan 22, 2019 · 📝 Jun 9, 2020 · ☕ 1 min read

Vue filters provide an excellent way to format data on the UI. Define Vue filters using a filter: block in single file components, or use global filters. Consider the following use cases - Purchase date is stored in yyyy-mm-dd in DB, but you have to display dd-mm-yyyy format Cost data needs to be displayed in currency of user’s locale Apply separators in bill number for better readability These and many more are easily accomplished in Vue filters.

Simple Form Validation in Vue

📅 Jan 21, 2019 · 📝 Jun 9, 2020 · ☕ 2 min read

You find forms everywhere in a data-driven application. Forms, as a rule, need some validation on the client-side to nudge users to fill in data in line with what we want. These validation are easy to implement in Vue. Consider an example that includes Vuetify for styling the UI -

Top Javascript Frameworks for 2019 (Yes, clickbait)

📅 Jan 20, 2019 · 📝 Jun 9, 2020 · ☕ 3 min read

tldr; There is no spoon. Longer version There is no one answer. Choose one, and get the job done. Even longer version Javascript is versatile and blah blah. But, how should you begin your search for the right framework? It took me no less than 3-4 weeks to get acclimatized with the nuances and settling down with a favourite framework.

Using Props in Vue Router

📅 Jan 19, 2019 · 📝 Jun 9, 2020 · ☕ 2 min read

Vue router can pass props to the view on invocation. This can be super useful when same views cater to different contexts, and the context is known at the time of clicking URL. Vue router just catches the context and passes it on to the view. For example: if you want to show “My Todos” to all users, and “All Todos” to administrators.

VueJS Proxy Error for Backend Connection

📅 Jan 18, 2019 · 📝 Jun 9, 2020 · ☕ 3 min read

VueJS has been my ‘go to’ front-end development framework for the last two quarters. I use VueJS with Laravel, FeathersJS and AdonisJS, and cannot just stop loving the development cycle. While you are developing the backend and frontend on same machine, and, if you fly solo - you end up using the same development machine for all purposes.

Authentication in Vue Router

📅 Jan 17, 2019 · 📝 Jun 9, 2020 · ☕ 3 min read

Vue router has a simple job - receive client-side requests and invoke the view that needs to be rendered in the browser. That is also a powerful job. Typically, this is what you see in a Vue router - 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 // client/router.

Persistent Storage in VueJS

📅 Jan 16, 2019 · 📝 Jun 9, 2020 · ☕ 3 min read

VueJS is massively useful tool. And, I love churning out SFCs like there’s no tomorrow. Vue helps us provide a super user experience. Combine it with Vuetify, Buefy and the like, and you have an application that is loved by all. Except, when the user hits F5 in the browser.

Using Lucid vs. Database Raw in AdonisJS

📅 Jan 15, 2019 · 📝 Jun 9, 2020 · ☕ 2 min read

Lucid ORM, the official ORM of AdonisJS, is based on knex.js. It is one of the friendlier ORMs that provides the ease of using a readable syntax along with a better performance than some of the feature-heavy ORMs. But, I have been recently torn between using one or the other.

Manage incremental changes to database in AdonisJS

📅 Jan 14, 2019 · 📝 Jun 9, 2020 · ☕ 2 min read

Use database migration utilities in Adonis to its complete potential. Carry out incremental updates - may it be a new table, or changes to existing table using distinct migration files that are version controlled. You have a beautiful Todo application that has a todos table with the following columns: description status end_date Now, let’s say our users ask for a new field called planned_end_date.

Handle Creation of Single or Multiple Records in AdonisJS

📅 Jan 13, 2019 · 📝 Jun 9, 2020 · ☕ 2 min read

Support creation of a single record or a group of records using same business logic and in the same controller in AdonisJS. Typically you create the following controller to handle record creation - 1 2 3 4 5 6 // TodoController.js async create({ request, auth }) { const data = request.