Skip to main content

Posts

VueJS Modal Popup Integration Using @kouts/vue-modal Plugin

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 < 8kbOpens and closes with a data variable using v-modelIncludes sensible default styling but it's also highly customizable via user CSS classes and stylesOverride modal title and content via slotsModal intro and outro effects using CSS animation classesExposes Component events like before-open, opening, after-open, before-close, after-closeScrollable 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 - tabbed naviga…

VueJS 3.0 Simple DatePicker Integration Using vue3-datepicker-lite Plugin

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/cliCommand 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 serv…

VueJS 3.0 Simple Toast Integration Using vue-dk-toast Plugin

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/cliCommand 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 serveInstall 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 'vue-dk-toast&#…

The vue-lazy-youtube-video VueJS Plugin For Lazy Loading YouTube Videos

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 1MBFor moder…

Blazor WebAssembly Custom Authentication From Scratch(Part 2)

In this article, we are going to explore and implement the usage of a refresh token in our Blazor WebAssembly.In Part 1 we have explored complete guidance for implementing authentication in the Blazor WebAssembly application from scratch.Store Refresh Token In-Browser LocalStorage:If we recall Part1, we have stored our access token in the browser localStorage, similarly, we need to store our refresh token in the browser localStorage. Now update the 'LoginAsync' method in the AccountService file to save the refresh token. Services/AccountService: public async Task<bool> LoginAsync(LoginModel model) { var response = await _httpClient.PostAsJsonAsync<LoginModel>("/account/login-token", model); if (!response.IsSuccessStatusCode) { return false; } AuthResponse authData = await response.Content.ReadFromJsonAsync<AuthResponse>(); await _localStorageService.SetItemAsync("token", authData.Token); await _localStorageService.SetItemAsync…

Blazor WebAssembly Custom Authentication From Scratch

In this article, we are going to explore and implement custom authentication from the scratch. In this sample, we will use JWT authentication for user authentication.Main Building Blocks Of Blazor WebAssembly Authentication:The core concepts of blazor webassembly authentication are: AuthenticationStateProvider ServiceAuthorizeView ComponentTask<AuthenticationState> Cascading PropertyCascadingAuthenticationState ComponentAuthorizeRouteView Component AuthenticationStateProvider Service - this provider holds the authentication information about the login user. The 'GetAuthenticationStateAsync()' method in the Authentication state provider returns user AuthenticationState. The 'NotifyAuthenticationStateChaged()' to notify the latest user information within the components which using this AuthenticationStateProvider.
AuthorizeView Component - displays different content depending on the user authorization state. This component uses the AuthenticationStateProvider service …

A Sample On .Net Core Web API Using Dapper

Overview On Dapper Object-Relational Mapping:Dapper is an Object-Relational Mapping framework for .Net applications. It is a mapping model between the database and .Net objects. The Dapper provides all query and command execution methods as extension methods under the 'System.Data.IDbConnection' interface. The Dapper works as a similar ADO.Net but with much more model mapping support. The Dapper key features are like: High performance in query executionMultiple query execution supportAn easy model mapping between the .Net Object and database result. Create A Sample .Net Core Web API Application:Let's understand the Dapper ORM query and commands execution steps by writing some sample code, so let's get started by creating a .Net Core Web API application. The IDE's for development can be chosen by personal preference but the most recommended IDE's are Visual Studio 2019 and Visual Studio Code. SQL Table Schema:In this article we are going to work on 'Todo' t…