Tech Seeker

In this article, we are going to understand the process of integration of jQuery Mask Plugin into the VueJS 3.0 application. Features Of jQuery Mask Plugin: String/Numeric/Alpha/Mixed masking supports. Support event callbacks Reverse masking. Pattern matching Option pattern matching. Create A Sample VueJS 3.0 Application: The toast plugin we are integrating needs to be integrated into the VueJS application of version 3.0. Command To Install Vue CLI Globally On Your System: npm run -g @vue/cli Command To Create Vue App: vue create your_application_name After creating a sample application run the following command to start the application. Command To Run Vue App: npm run serve Install jQuery Mask Npm Package: Command To Install Mask Plugin: npm install vue-jquery-mask After successfully installing the 'vue-jquery-mask' plugin its reference will be added to the package.json Import 'vue-jquery-mask': Let's import 'vue-jquery-mask' into our vue compon

In  Part-1  we have done complete implementation on NestJS application authentication by creating the user access token. Now we are going to explore the implementation of the refresh token. We will continue to work on the sample app we have used in  Part-1 . Refresh Token Flow: Refresh Token is a random string key that will be created along with the JWT access token and return to the valid client on successful logging in. Now for all subsequent requests will use the access token, but the access token is a short-lived token where as refresh token lives more time than the access token. On the expiration of the access token, the user instead of authenticating himself again passing his user name and password, the user can send the refresh token. The server on receiving a refresh token, first it validates against the storage(database, cache, etc). For a valid refresh token server will create a new access token and refresh token(like when authenticate using user name and password) return it

In this article, we are going to explore the implementation steps of JWT(JSON Web Token) authentication in the NestJS application. In this process of authentication, we going to use the 'passport' library(nodejs library) where we write simple customizable authentication. Create A Sample NestJS Application: Let's understand step by step implementation authentication in NestJs application, so let's begin our journey by creating a sample application. Command To Install CLI: npm i -g @nestjs/cli Command To Create NestJS App: nest new your_project_name Create Users Model: Create a 'User' model that represents the table. For now, let's create a simple class in the upcoming steps we make it compatible to communicate with the database. src/users/users.ts: export class User{ id:number; userName: string; password: string; } Create A UsersService: The 'UsersService' is a logical container for our 'Users' data. For now, just mock the user&

In this article, we are going to explore the implementation of modal popup using '@kouts/vue-modal' plugin in the VueJS application. Overview On @kouts/vue-modal Plugin: Some key features of this plugin are as below: LightWeight, the minified gzipped version is < 8kb Opens and closes with a data variable using v-model Includes sensible default styling but it's also highly customizable via user CSS classes and styles Override modal title and content via slots Modal intro and outro effects using CSS animation classes Exposes Component events like before-open, opening, after-open, before-close, after-close Scrollable when it's contents exceed screen height. Closeable by clicking on the upper right "x", the overlay, or the ESC key. Stackable - Multiple modal windows on top of each other. Ability to set initialFocus on an element when the modal window opens just set the autofocus attribute on an element inside the modal. Focus management traps keyboard focus - t

In this article, we are going to understand the process for the integration of date picker in the VueJS 3.0 application using the 'vue3-datepicker-lite' plugin. An Overview On vue3-datepicker-lite Plugin: The key features of the 'vue3-datepicker-lite' plugin are as follow: value -  This property to capture the selected date value or to set the default selected value. class -  The class property to add a custom design to the date picker. id -  The id property added to the HTML rendered date picker element. locale - The 'locale' property is a javascript object literal, where we can configure buttons and date picker days labels. value-changed - This event gets triggers on date value selection. Create A Sample VueJS 3.0 App: Command To Install Vue CLI Globally On Your System: npm run -g @vue/cli Command To Create Vue App: vue create your_application_name After creating a sample application run the following command to start the application. Command To Run Vue

In this article, we are going to understand the process for the integration of sample toast in the VueJS 3.0 application using the 'vue-dk-toast' plugin. Create A Sample VueJS 3.0 App: The toast plugin we are integrating needs to be integrated into the VueJS application of version 3.0. Command To Install Vue CLI Globally On Your System: npm run -g @vue/cli Command To Create Vue App: vue create your_application_name After creating a sample application run the following command to start the application. Command To Run Vue App: npm run serve Install vue-dk-toast NPM Package: Command To Install Toast Package: npm i vue-dk-toast After installation package reference will be added to the package.json Import Toast Globally: Now we need to import the Toast component, by configuring in main.js(entry file), it makes a toast available for the entire VueJS 3.0 application. src/main.js: import { createApp } from 'vue' import App from './App.vue' import DKToast from

In this article, we are going to explore the implementation to load lazily the youtube videos. The VueJS plugin called 'vue-lazy-youtube-video' provides use lazy loading functionality for the youtube videos. About The vue-lazy-youtube-video Plugin: In general, if we configure a youtube Iframe URL on our website, on rendering along with youtube video also loads many other resources like js files, thumbnails, etc. All these resource files are not required until we want to start the video to play. To gain our website performance, we need to implement an approach to load these resources lazily. So lazy loading of youtube videos can be achieved in the VueJS application using the vue-lazy-youtube-video plugin. The plugin on rendering only fetches 'Thumbnail' image of the video on website renders, on clicking the play button then the library starts fetching all video-related resources. The key features it provides are: Reduces initial load size of the video around to 1MB For m