Tech Seeker

In this article, we will learn about scratch card integration in the vuejs application using a 'vue-scratchable' plugin. Create A Vuejs Sample Application: 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-scratchable Npm Package: Command To Install Scratch Card Package: npm i vue-scratchable Register Scratch Component Globally: Now let's register the 'vue-scratchable' library component globally by importing in main.js(entry file). src/main.js: import Vue from 'vue' import App from './App.vue' import VueScratchable from 'vue-scratchable'; Vue.component('vue-scratchable', VueScratchable); Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app') (Line: 3) Imported 'v

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

In this article, we are going to explore the 'vue-qrcode' plugin by integrating it into our sample VueJS application. Create A Vue Sample App: Let's use the following command to create a VueJS application. 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-qrcode NPM Package: Run the following npm package commands to install QRcode packages Command For VueQRCode: npm install vue-qrcode Command For QRCode(VueQRCode depends on QRCode package) npm install qrcode After installing npm packages references will be added to package.json vue-qrcode Key Properties: The 'vue-qrcode' provides a configurable vue component to render the QR Code. The following key properties: errorCorrectionLevel margin scale width color type value color Import VueQrCode

In this article, we are going to explore the 'sweetalert2' plugin by integrating into a sample VueJs application. Create A Sample Vue App: Let's run the following commands to create a sample Vue 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 App: npm run serve Install vue-sweetalert2: Run the following command to install our plugin. Command To Install Alert Plugin: npm install -s vue-sweetalert2 After successfully installing the plugin cross-verify it's presence in the package.json file. Register SweetAlert2 In main.js: On registering SweetAlert2 in main.js, then it will be available to all components of the application. src/main.js: import Vue from 'vue' import App from './App.vue'; import VueSweetalert2 from 'vue-sweetalert2'; import '