Tech Seeker

In this article, we are going to understand the basic concept of routing in the VueJS 3.0 application. Create A VueJS 3.0 Sample Application: Let's understand routing concepts by doing a sample VueJS 3.0 application, so as a first step create a sample application. Command To Install Vue CLI Globally On Your System npm run -g @vue/cli Command To Create Vue App: vue create your_app_name The vue-router available as a separate library, so to install it run the following command. Command To Install Vue Router Library(For Vue3.0) npm install vue-router@4 After successfully installing the route library we can observe the route library reference in the package.json file. Create Vue Components: Let's create sample components like 'Home' and 'About'. We will load this component based on a route like pages. src/components/Home.vue: <template> <div> My Home Page </div> </template> <script> export default { } </sc

In this article, we will explore JSON data to excel file generation in the Vuejs application. An Overview On vue-json-excel: The technique to download your JSON data as an excel file directly from the browser. The following are key options for the excel vue component. data: The array of data to be exported. fields:  Fields inside the JSON object that you want to export. If none provided, all properties in the JSON will be exported. type: Mime type[xls, csv]. name: Filename to export. header: Title(s) for the data. Can be a string(one title) or an array of string (multiple titles). footer: Footer(s) for the data. Can be a string(one footer) or an array of strings(multiple footers). default-value: Use as a fallback when the row has no field values. worksheet: Name of the worksheet tab. fetch: Callback to fetch data before download if it's set it runs immediately function after mouse pressed and before the download process(Note: Only works if no data prop is defined). before-generate:

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