Tech Seeker

In this article, we are going to implement Vue 3 sample application that consumes GrpahQL Endpoint using the Vue Apollo library. Create Vue 3 Application: Let's create a sample Vue 3 application to accomplish our demo. Vue CLI Command To Create Project: vue create your_project_name GraphQL Server Endpoint: We should have a GraphQL server endpoint for our demo. So I created a GraphQL server endpoint using 'Dotnet', so I'm going to use it here so its URL be like 'https://localhost:6001/graphql'. So please make sure to have your own GraphQL server endpoint. Install Vue Apollo And Its Dependent Libraries: npm install --save @vue/apollo-option npm install --save @apollo/client npm install --save graphql npm install --save graphql-tag One more plugin we have to install 'react', at the time of this article written we will get an error that says that need to install the 'react', so this 'react' installation might be avoided in feature r

Part-1  we implemented user login and logout using the HttpOnly Jwt cookie in our Vue application. In this article, we are going to understand the refresh token(refresh token also stored in HttpOnly Jwt Cookie). Gaurd Routes: One of the important cases we always need to consider while implementing authentication is guard routes between user authenticated and non authenticates cases. Suppose an authenticated user can't access the login page. Similarly, a non-authenticated user can't access the dashboard page(any page that needs user authentication). So to fix this kind of case we have to define our navigation rules at our route guard. But before implementing our route guard logic, we need to set one flag in browser local storage. The flag we will add represents that the user is authenticated. This flag helps us to avoid unnecessary calls to the profile API if the user reloads the application. Now let's add the flag to browser local storage on user authenticated. So let&#

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

In this article, we are going to learn about the steps to integrate the side menu using the 'ion-menu' component in the Ionic&Vue application. 'ion-menu' Component: Using the 'ion-menu' component we can develop a verticle side menu for our mobile ionic application. The menu should be rendered as a sibling element to the root content element. Mostly the root content element in our Ionic&Vue application is 'ion-router-outlet', so our menu element should be the sibling to it. So to operate on the menu component we have to use the 'menucontroller' that loads from the '@ionic/vue'. The key terms we need to remember while implementing the 'ion-menu' component: menucontroller: The 'menucontroller' helps to operate on our menu like opening and closing of the menu. It's not ideal to use multiple menus in the application but ionic supports to render multiple menus so to open them from anywhere of entire application it is

In  Part-1  we have learned about user authentication using the jwt access token in the Ionic&Vue application. This is the continuation article here our main goal to use refresh token on the expiration of the access token. 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 Use Access Token As Authorization Header To Secured Endpoint: Now we will consume the secured endpoint(in our sample 'Todos' endpoint) by sending the access token value as the authorization header. So to work with the todos endpoint let's create a separate store module as below. src/store/modules/todo.js: import axios from "axios"; const store = () => ({ todos: [], }); const getters = { getAllTodos(state) { return state.todos; }, }; const actions = {

In this article, we are going to understand the implementation steps on jwt authentication in the Ionic5 Vue application. Here our main concentration is on the jwt access token to make the user authentication. What Is JSON Web 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 Sample App Of Ionic5 Using Vue : To begin to create an Ionic application, we should have the Ionic CLI installed in our system environment. Command to install latest Ionic CLI: npm install -g @ionic/cli@latest Now run the following command to create Ionic5 using the Vue application. Command to create Ionic Vue application ionic start your_app_name blank --type vue Now run the following command to install Vuex into our Ionic&Vue app. Vuex Command npm install vuex@next --save TypeScript Or Javascript: By default Ionic sample created with the support of TypeScript in any library like angula