Tech Seeker

In this article, we will understand the pagination in the Vue3 application using the '@ocrv/vue-tailwind-pagination' plugin. Key Features Of Plugin: current -  The 'current' property to set the current page number. total - The 'total' property that represents the number of records for the table content. So based on this 'total' property value, the total number of page numbers display depends. per-page - The 'per-page' property to set the count for the records to display for each page. page-changed - The 'page-changed' event that raises on selecting the page. It outputs  '$event' which is nothing but the selected page number. Create A Vue3 Sample Application: To implement our pagination sample let's begin by creating a Vue3 sample application. Command To Create Vue3 Application: Vue Create Your_Sample_App_name Install Tailwind Pagination NPM Package: Tailwind Pagination NPM Package Command: npm install --save @ocrv/vue-ta

This article, explains about 360-degree image previewer in the vue.js application using the 'vue-360' plugin. Overview  On 'vue-360' Library: Some of the key features of the 'vue-360' library are: amount - total number of image count that is used to display the 360-degree image preview. imagePath -   need to specify the relative path or full domain path without the image name. fileName - need to specify the file name. spinReverse - boolean property used to rotate the images in reverse order. The default value is false. autoplay -  autoplay your images. The default value is '24' images. loop - number of loops you want for autoplay. The default value is '1'. boxShadow-  apply a box-shadow background. The default value is 'false'. buttonClass - apply styling to buttons. The default value is 'light'. paddingIndex - apply leading zero to image index. The default value is 'false'. disableZoom - disabling zoom functionality.

In the  Part-1  we have learned steps to build a VueJS application authentication by using an access token(Jwt token). This is the continuation article, here we are going to understand the steps for implementing refresh token and using access token in the request header to call secured API. NestJS(Nodejs) Todos API: In  Part-1  we discussed steps to set up the Nestjs API. In that API we have a secured endpoint called 'Todos'. In the next step, we are going to consume this 'Todo' API from our angular application. http://localhost:3000/todos Access Token Authorization To Access Secured Endpoint: Now let's try to access the secured endpoint 'todos' mentioned above in our 'Dashboard' page. Now for this todos, we are going to create another module file like 'todo.js'. src/store/modules/todo.js: import axios from 'axios'; const state = () => ({ todos :[] }); const getters = { getAlltodos(state){ state.todos; } }; const

In this article, we are going to understand the steps for JWT(JSON Web Token) authentication. Here our main focus to fetch the JWT access token to make users log into our VueJS 3.0 application. For maintaining user info we will use Vuex state management. JWT Token: JSON Web Token is a digitally signed and secured token for user validation. The jwt is constructed with 3 informative parts: Header Payload Signature Create A VueJS 3.0 Sample Application: Let's begin by creating a VueJS 3.0 sample application. Command To Install Vue CLI Globally On Your System npm install -g @vue/cli Command To Create A Vue App: vue create your_app_name Required NPM Packages: Need to install the Vue routing library to configure routing into our application. Command To Install Vue Router Library(For Vue3.0) npm install vue-router@4 Need to install the Vuex Store library to configure state management to our application Command To Install Vuex Store Library(For Vue3.0) npm install vuex@next Install

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: