Tech Seeker

Posts

Showing posts with the label Vue.Js

VueJS Sample To Generate QR Code Using VueQrcode

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

An OverView On VueJS Alert plugin vue-sweetalert2

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 '

Vuex State Management Sample

Vuex is a state management pattern or state management library. Vuex makes data management easy and more maintainable in the application. Vuex main target of integration with Vue.js library. In simple words, Vuex is a data store that supplies or provide data to Vue components with much consistently, more efficiently by making code more simple. Transferring of data between the component can be done effectively using Vuex when comparing with the traditional way(Vue.js passing data by input parameters). Vuex pattern is similar to Redux, Flux existing libraries for state management. Vuex Core Building Blocks: Actions: Actions are task performers which have the capabilities to do either synchronous or asynchronous operations. In Vuex actions are used to invoke the rest API's to fetch the data and then actions call mutations to change the store state. To invoke mutations actions use a command called 'commit'. This 'commit' command invokes appropriate mutation and receiv

Vue.js Sample For Beginners

Introduction: Vue.Js is a front-end progressive javascript framework. Vue.Js is one of the most widely used javascript frameworks. It is a very light-weight or skinny framework, which downloads very fastly on all most all modern browsers. It can be used in both multi-page and single-page applications. Getting Started: Let's start learning Vue.Js by hands-on by creating a single-page sample application by referring to all basic features in it. Create a folder to store sample application files, add an 'index.html' file and 'app.js'(maintain Vue.Js Code) file and refer Vue.Js CDN link on the index.html and for UI design let's refer Bootstrap links on the index.html page. index.html: <html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"