Developer Insights
Join millions of viewers! Our engineers craft human-written articles solving real-world problems weekly. Enjoy fresh technical content and numerous interviews featuring modern web advancements with industry leaders and open-source authors.
Authentication with @this-dot/vue-route-guard
@this-dot/vue-route-guard is a Vue library that wraps around the vue-router and extends it to provide helpful methods to handle page guards via token authorization and permissions. Authentication Over the years, web applications have always had authenticated (available to authorized users) and unauthenticated (available to anyone) pages. The most common authentication method used in web applications is the token based authentication. This involves sending some user details to an API (backend), then receiving a token that is stored on the users computer and associated with the web application. When user tries to access an authenticated page before they are logged in, the user is redirected to page where they can get authenticated. There are different things to consider while building a web authentication system, including the type of storage for persisting tokens, pages that need authentication, user roles, and redirect paths. This process can get more complex depending on the application. To help with this, we can use vue-route-guard. It helps us with: ✅ Adding authentication guards to pages ✅ Supporting different storage options for storing token ✅ Storing and retrieving authentication data (user details and token) in a reactive state ✅ Exposes method for matching user permissions Our example application Let's set up an example application you can play with on Stackblitz here. The example application flow: A user who tries to access the /route-guard or /route-guard/about pages without authentication is redirected to the login page. After login, a user without the 'admin' role cannot access the /route-guard/about page and is redirected to /route-guard/no-permission if they try to navigate to it. How to use @this-dot/vue-route-guard Let’s dive in on how to use @this-dot/vue-route-guard First, we install the package with: npm install @this-dot/vue-route-guard or yarn add @this-dot/vue-route-guard Let’s set up the package as a plugin in our application: ` Next, we need to register the plugin in our main file. ` Now that we have setup the vue-route-guard package in our project, we need to update the router setup by adding requiresAuth and access to the meta object of each route in the web application. requiresAuth to pages that need authentication, it takes a boolean. for eample: ` access to pages that also require a role permission along with the authentication. It takes an array of strings, for example: ` For the set up we have in the example app, we added authentication to the ‘/route-guard’ path, and also added admin permission access to the '/route-guard/about' path. ` Using session storage to persist our token, the routes are authenticated and users can’t access certain pages without the right permissions with the setup above. Lets take an example of how to setup using cookie storage. ` Setting user authentication data We can set the user authentication data by importing useGuardand calling the method setToken with the token. Example: ` Check if user has access hasAuthenticationAccess can be accessed from useGuard, and called to check if user has a specific permission Example: ` Access authentication data We can access authentication data by importing useGuard getting the store state. Example: ` Clear Authentication We can clear authentication data by calling clearAuthentication from useGuard. Example: ` Refresh Authentication Refresh authentication calls fetch authentication and updates the state with the new authentication details. We can refresh authentication data by calling refreshAuthentication from useGuard. Example: ` --- Feel free to reachout if you have questions, feedback or want to contribute. You can reach out to us at opensource@thisdot.co. If you would like to check out the source code, feel free to visit our repository....
Dec 16, 2022
3 mins
Rendering Modes in Nuxt 3
Nuxt is an open source framework to make your Vue.js applications. Currently, Nuxt 3 has a release candidate and the stable version would be out soon. In this series, I would be taking us through Nuxt 3 concepts and APIs. In this first part, we would focus on rendering modes in Nuxt 3. Setup To quickly install Nuxt 3, lets use the nuxt 3 documentation. Rendering modes Nuxt 3 offers a couple of different rendering modes: - Universal Rendering - Client-side rendering - Hybrid rendering Each of this rendering modes have their use cases and benefits. In this article, we will take a look at their pros, and how to implement them in Nuxt 3. Universal Rendering Universal rendering allows for code to be pre-rendered at build time or rendered on the server before it is served to the client on request. This results in very fast pages, because rendering on the server is faster and the user gets content on page load compared to Client-Side only rendering. Nuxt 3 also improves this greatly by allowing code to be rendered not just on node-js servers, but also on CDN edge workers. This increases the site speed, and also helps reduces cost. In Universal rendering, we can use pre-rendering. This means we can have some pages, or all pages, pre-rendered on build time, and other pages rendered at request time. This is a great choice for static pages like website landing pages, blogs and some dynamic pages that don’t change often and have a finite number of pages. Universal mode with server side rendering is best for sites with highly dynamic content that changes frequently, like ecommerce sites. Pros Search Engine Optimization: Universal rendered apps serve the page with the generated html content to the browser. This makes it easy for web crawlers to index such pages. Performance: The performance of Universal rendered apps are fast compared to Client-side rendered apps because the page already contains the HTML code, and this does not rely on the users device to parse and render the HTML. To deploy and use our Nuxt 3 application on a node-server in universal mode: First in nuxt.config.js file ` By default, SSR is set to true if it is not passed in the nuxt.config.js file. Also, preset is set to ‘node-server’ by default, but this can be changed to suit the deployment environment. For example, Vercel preset should be used for Vercel deployment. You can read here for available deployment presets. When we run our build command: ` This will generate the output folder with the app's entry point file. Next, we can run the file with Node. ` or ` To deploy and use our Nuxt 3 application on a static server in universal mode: First, in our nuxt.config.js file, we specify the pages to be generated: ` Now we can run our generate command: ` This will generate the output folder '.output/public' with the pages files and the related JS and CSS files. We can simply place this folder into any static hosting service, and access our application. To generate our routes async, like a blog website, we can fetch our routes and then pass it to the route during build with this hook. ` Client side rendering Client side rendering involves sending every request to a single file, usually ‘index.html’, with empty content and then linking them to the corresponding JS bundles, allowing the browser perform the parsing and rendering of the HTML. Client side rendering is a great choice for heavily interactive websites with animations, like online gaming sites, Saas sites, etc. Pros Offline support: Client-side rendered apps can run offline once the dependent JavaScript files are downloaded if there is no internet. It is easy to make a client side rendered app a Progressive web app. Cheap: Client-side rendered apps are the cheapest in terms of hosting as you do not need to run a server. They are made up of HTML and JS files which can be served from a static server. To config our Nuxt 3 app to be fully client side rendered: First in nuxt.config.js file ` Now we can run our generate command: ` This will generate the output folder '.output/public/index.html' with the apps entry point file and the related js files. We can simply place this folder onto any static hosting service, and access our application. Hybrid rendering Hybrid rendering is an unreleased Nuxt 3 feature that allows developers to configure different rendering modes for different pages. This should be available later this year, and we will explore it in this series once it is. For more official information about the hybrid rendering discussion. In the next article, we will implement a simple webpage using the universal rendering. The webpage will have a blog which will be prerendered, and also a dynamic user page which will be server rendered. --- I hope this article has been helpful to you. If you encounter any issues, you can reach out to me on Twitter or Github....
Oct 24, 2022
4 mins
Understanding Side Effects in VueJS
Introduction In this article, we will talk about side effects in VueJS, and how to prevent some of them. Side effects are not outrightly bad since they might have some usecase like in a setTimeout() function. But we need to try to ensure that we know about these side effects. What are side effects? A side effect is when a function changes or modifies data that does not exist in its local scope. A simple example is a function that receives a parameter which is an Array, and inside that function, it changes the data in that array. Example: ` From this example above, we find out that numberList is been mutated when additem is called. Side Effects in Vue Example 1: Side Effects in Computed Properties Lets try to create a side effect example in a computed property. ` From the example above, we would see that the Unsorted Data and Sorted Data are the same. this.languages data model gets mutated when sortedLanguages is referenced. This is a side effect that can result in unexpected behaviours in your application if not properly handled. Example 2: Side effects wWen Accessing Getters Lets try to create a side effect example when accessing and assigning a getters data model. // store/index.js ` From this example, we would see that the store gets updated when we call (dispatch) the action sortLanguages. This is a side effect that can result in unexpected behaviours in your application, because the languages state is been mutated. How Do We Resolve These Side Effects? - Shallow clone ` When we shallow clone a language's array using the .slice() method, it returns a shallow copy of a portion of the array into a new array object. We do this to prevent a mutation of the language's data model. - Deep clone ` To deep clone, we can simply use json.parse(json.stringify(()) on our data model. JSON.stringify converts the data model to a string which removes references from the data model. JSON.parse converts the string back to an array of objects. In Vue, side effects that modify reactive properties in the store can be hidden and cause unexpected bugs which can be difficult to trace and debug. It's my hope that this article helps you better identify and respond to side effects in VueJS. If you have any questions or run into any trouble, feel free to reach out on Twitter or Github....
Sep 12, 2022
2 mins
Testing Vue Composables with Jest
In this post, we will take a look at how to test Vue composables with Jest. What Are Composables? When developing large scale frontend applications, we reuse logic for repetitive tasks. With composables, we are able to resuse logic in a stateful manner with the help of the composition API. Testing For this example, we create a composable to handle changes in screen size. Depending on how complex your composable is, you can simply test the reactivity directly or load it into a wrapper component, and then test the wrapper component. ` Let's write the following tests for this composable. - check currect value of screen size - check currect value of screen size after resize event is fired To test that the resize event changes the current value when fired, we need to load our composable in a component. ` From the implementation we completed above, the core logic of our breakpoint method is in an external function called "composable", and we can simply reuse it across our frontend code. Any manipulation to the state of a composable should be done directly within the composable to avoid bugs and make it easier to read. I hope this article has been helpful. If you have any questions or run into any trouble, feel free to reach out on Twitter or Github....
Sep 7, 2022
1 min
How to Style Using SCSS in Nuxt
Introduction SASS makes working on large projects more organized. It allows you to use variables, nested rules, mixins, and functions. The preferred styling method in Nuxt is component file styling, and integrating SASS into your project can make your component file styling appear more understandable. How to Import SASS in Nuxt To add SASS after setting up your Nuxt application, we will first install SASS and sass-loader. Let's run either of these commands depending on our package manager. ` Component File Styling With SASS and sass-loader installed in our project, we can now write SCSS in our component file. Lets see an example: ` In the example above, all we need to specify is lang="scss" on the style tag, and we can now write scss in that component. Global File Import and Variables To import SCSS files that are global, like variables and mixins files, we need to install style-resources: ` Next, we can update our nuxt.config.js file by adding the module we just installed to the buildModules. ` Next, let's create a global variables.scss file in our assets/style folder. Add a single variable inside: ` Next, we need to import this file inside the nuxt.config file: ` Now we have the variables in our variables.scss available in all our components for use. Next, let's test it out by updating our button component. ` We have updated our button variant color to be our global SCSS variable ($primary and $white). Mixins Mixins in SASS are used to write styles that can be reused in other parts of the code. Let's create a sample mixin to center an item. ` Next, we need to import our mixin in Nuxt config: ` Now, let's update our button component with our mixin: ` Functions Functions in SASS are used to write complex operations or behaviours that can be reused in other parts of the code. Let's create a function to handle a media query for our application. ` This is a basic example of what a function can be used for. More complex cases, like calculating percentage, can also be done. Let's import our mixin in Nuxt config: ` Let's update our button component with our function: ` We have been able to add SASS to our Nuxt project, and also looked at some ways in which SASS can make our codebase look cleaner. I hope this article has been helpful to you. If you encounter any issues, you can reach out to me on Twitter or Github....
Aug 17, 2022
2 mins
How to Create and Deploy a Vue Component Library to NPM
When working across multiple Vue projects that share the same design system, it is more efficient and faster to have a component library that you can reference for all your components within the different projects....
Jul 18, 2022
4 mins
VueJS Updates - October 2021
🌱 Introduction What’s new in Vue? What new frameworks are available for software developers building futuristic products? How is Vue catching up to changes in the technological ecosystem, and improving on processes, systems, and experience? If you are curious to know what’s new in the Vue ecosystem, read on to discover new updates, developments and high-level plans discussed in this edition of Vue Contributor Days, hosted by Tracy Lee, Evan You, and Simone Cuomo. If you would rather watch the full event, you can find it here. First off, let’s have a quick glance at the cool panellists featured in this edition. The Panelists Highlight: - Ben Hong - Senior DX Engineer, Netlify & Vue Core Team Member - John Leider - Author & Founder, Vuetify - Rahul Kadyan - Software Engineer & Vue Core Team Member - Kia King Ishii - Director, Global Brain & Vue Core Team Member - Thorsten Lünborg - Product Owner @ MVV Enamic & Vue Core Team Member - Haoqun Jiang - Open Source Developer, Vue Technology LLC & Vue Core Team Member / Vue CLI maintainer - Guillaume Chau - Vue Core Team Member - Kazuya Kawaguchi - Software Engineer, PLAID, Inc & Author of Vue i18n - Anthony Fu - Core team member, Vue & Vite - Daniel Roe - Framework Architect, Nuxt - Carlos Rodrigues - Consultant - Filip Rakowski - Co-founder/CTO, Vue StoreFront - Liam DeBeasi - Lead Developer, Ionic Framework - Maya Shavin - Senior Software Engineer, Microsoft & Nuxt. js Ambassador - Luke Diebold - Lead developer, Agripath & Quasar Core Team - Jonathan Bakebwa - Creator of Chakra UI & UI Engineer rct.ai - Paolo Caleffi - Co-Founder, Dreamonkey & Quasar Core Team - Yaël Guilloux - VueUse & Nuxt Contributor - Fred Schott - Creator of Astro Now let’s dive in! 🌱 Vue 3.2 1) 3.2 Released in August - (Script setup) is out of experimental - (style) v-bind - Define custom element () - Reactivity performance ++ - Effect scope API - ESM build + improved streaming API for @vue/server - renderer - V-memo for advanced performance optimization 2) NEW RFCs - Ref Transform Vuejs/rfcs/discussions/369 - Props Destructure Transform Vuejs/rcfs/discussions/394 Vuejs/vue-next/pu11/4690 3) New documentation (WIP) - https://github.com/vuejs/docs/free/next - Staging Deployment is available at https://vue-docs-preview.netlify.app/guide/introduction.html - Dark mode is now available - More User focus - A new introduction: Vue as a framework - Better Learning path - Single-file component and different API preferences 4) New Default Recommendations - Vue-cli => create-vue (vite based) - Vetur => Velar - State Management: consolidate Vuex-next, Pina, core 3) SSR Focused - Async Component Hydration Strategies - Other Hydration / Payload Improvements - Suspense Finalization## 👩💻 🌱 Comunity updates 👩💻 IONIC VUE(Liam DeBeasi - Lead Developer, Ionic Framework) - Updates to Ionic/Vue V6 - New Components, example: Accordions, Breadcrumbs, etc - Updated to new IOS designs - Added support for Vite - updates to CapacitorJS - Updates to StencilJS 👩💻 Vue i18n (Kazuya Kawaguchi - Software Engineer, PLAID, Inc & Author of Vue i18n) - Current stable version is 9.1.9 - It supports Vue 3 - Typescript support 👩💻 Astro (Fred Schott - Creator of Astro) Checkout https://astro.build/. It supports Vue. 👩💻 QUASAR (Luke Diebold - Lead developer, Agripath & Quasar Core Team) - Vue 3 Support - Volar Support - Vite Support in progress - Core App Extensions Migration are nearly complete, A Popular example is Qcalendar. - Static Site Generator(SSG) Freddy38510/quasar-app-extension-ssg - Cypress component testing integration, still in Alpha. - Visit Quasarcast.com to learn about version 2. Everything is free. - QuasarNews.com (Podcast) Coming soon. - 72+ component series in Quasar Components(QuasarComponents.com). 👩💻 VUE Storefront (Filip Rakowski - Co-founder/CTO, Vue StoreFront) - Building high-quality tools to help developers build an amazing e-commerce storefront. - Vue Storefront Middleware and UI. - Vue Storefront Platform to host and analyze on the storefront. 👩💻 Nuxt (Daniel Roe - Framework Architect, Nuxt) - Nuxt 3 Public beta https://v3.nuxtjs.org/ - Nuxt Cli - Nuxt ecosystem is now ESM 👩💻 VUETIFY (John Leider - Author & Founder, Vuetify) - Updates to the Form component. - New validation system, selection controls, checkboxes, different filtering methods on different types of data. - Update to Autocomplete component. - New component for Nested functionality. - Vite plugin. - SAAS Interfacing: updated from import to modules so it’s more intuitive for modification of the frameworks or utility classes. - It supports the different compile methods for overriding variables. - It works with Vue CLI. - A new vite SSR documentation. 👩💻 CHAKRA U.I (Jonathan Bakebwa - Creator of Chakra UI & UI Engineer rct.ai) CHAKRA U.I/ VUE NEXT VI Alpha release is out and in use for production and mostly relies on the theme API - Base style overrides and custom variants. - Partial back-port to @^0.10.2 - Mode utility. - V2 early development with UI machines. - State machines to write Vue composition API hooks. - CHAKRA U.I Extract for Zero- runtime styling API. 👩💻 Nuxt (Anthony Fu - Core team member, Vue & Vite) - Vue 3 Syntax in Vue 2. - https://github.com/vuejs/composition-api - https://github.com/antfu/unplugin-vue2-script-setup - https://github.com/antfu/unplugin-auto-import - https://github.com/antfu/unplugin-vue-components 🧠 Have Any Questions 🙋♀️ If you have any questions or things to share? Use #VueContributorDays on Twitter and talk with us! 📺 View the replay here for the full update on the Vue Ecosystem! 🤝...
Oct 20, 2021
5 mins
Introduction to VueJS and RxJS
Let's start with a brief introduction. What is VueJS Vue.js is a progressive open-source front end JavaScript framework for building user interfaces, and single-page applications. What is RxJS RxJS is a library for reactive programming, and has components that enable the composition of asynchronous code. This means it takes data as streams (Observables) that can be subscribe to. Installation/Setup Following these steps, let's set-up our Vue application, and install RxJS: ` ` ` Creating an Observable To create an observable ` An observer of an observable is an object with three functions: next, error, & complete. ` Let's take a look at an example to better understand Observables. ` From the example above, we can see that “Introduction to Vuejs and Rxjs” is printed out after 2.5 seconds, and then "completed" is printed after. RxjS operators Creating an observable manually every time can make code become very lengthy and difficult to read. Therefore, RxJS has alot of useful operators. Some of the most commonly used operators are - Creation Operators - Transformation Operators - Filtering Operators - Combination Operators - Conditional Operators - Join Operators - Multicasting Operators - Error Handling Operators We would be discussing examples on Creation, Transformation, and Filtering operators in this post: Creation operators These operators make creating an observable easy for various usecase. Some examples are 'interval', 'from', and 'of'. - interval: Creates an observable that emits sequential numbers every specified interval of time. ` - from: Creates an observable from an array, promise, iterables or string ` - of: Creates an observable from a sequence of values ` Transformation operators These operators provide data transformation techniques for values passing through. An example is 'map'. For the example below, we use map to transform our array of objects ([{name: "VueJS", language: "js"}]) into an array of strings(["VueJS"]). ` Filtering Operator This operator helps in choosing and refining how and when data is obtained from an observable. An example is "Filter". For the example below, we use "filter" to obtain an array of objects where language is "js". ` Example Now that we have discussed some of the basics, lets try building a page that shows a list of frameworks. Each item of the list should be delayed before being displayed. ` Live Demo This is a codesandbox demo for you to play around with: Conclusion RxJS is really expansive, and can't be covered in just a single blog post. To learn more about RxJs, checkout the official documentation here: https://rxjs.dev/ or https://www.learnrxjs.io/. There is also a very good Vue plugin for Rxjs here. If you have any questions or run into any trouble, feel free to reach out on Twitter or Github....
Jun 25, 2021
3 mins
How to Set Up Storybook in VueJS
How to setup Storybook in VueJS In this post, we will take a look at how to setup storybook in our VueJS application. What is Storybook? Storybook is a tool for developing UI components / libraries faster and in isolation. Storybook is an excellent addition to a project development cycle as it allows you to work on one component at a time and develop entire UIs without needing to start up a complex dev stack, force certain data into your database, or navigate around your application. It can also be used to write a documentation (story) of what each component does: for the parameters it accepts, the event it emits and response to expect. A story describes a component in a specified state. You'd want to write a story for each state a component can have, such as active, inactive, loading. Storybook will then let you preview the component in its specified state in an interactive component library. Setup our Project Let’s start by creating our VueJS project. We would be using yarn for package management. Using Vue CLI >Install Vue CLI if you don't already have it installed. ` >Create vue app ` >Enter 'your-app' folder ` Add storybook ` >Add Storybook to package.json ` -p command refers to the port number where the Storybook will be run. -c command refers to the config directory. -s command refers to directory to load static / public files >run the following command, we should now see storybook running on port :9001 ` Let's Configure Storybook in our VueJS project As a best practice, Storybook configuration should be stored in a directory called .storybook. Create .storybook directory as the config directory in the project root ` Next lets create our config file Create main.js inside our .storybook folder ` The main configuration file main.js controls the behaviour of the Storybook server. - stories - an array of globs that describes the location of your story files, relative to main.js. This makes the maintenance of the main.js file much easier by keeping it highly focused on the configuration of Storybook rather than its implementation. You can require as many stories as you need. - addons - a list of all the addons you are using (we will be describing what addons are as we go). - babel - custom babel configuration. Note: you must always restart the Storybook’s process when you modify the main.js so as to update it. Our folder structure should look like this: Let's write a story for a button component First, let's write our custom button component - ../src/component/button.vue ` Let's write stories inside ./src/stories/button.stories.js ` Addons are plugins in Storybook used to perform advanced functionalities on components. Examples are actions, knobs etc. - The actions addon is used to display data received by an event handler (callback) arguments in your stories. - The knobs addon allows you to dynamically interact with a component’s args (inputs). Experiment with alternate configurations of the component to discover edge cases. Update our main.js file. Now let's add the path from main.js to our stories folder: ` >Let's stop our storybook server and run it again ` Now if we click on the button we would notice that there's a log of the event under actions in our storybook. If we click on the knobs tab, we would be able to edit the values that our component accepts and see how they change in realtime. Conclusion Yes! We've been able to setup Storybook in VueJS and have also built a simple button component to test out knobs and actions. For more complex examples like using Vuex store in stories, check out Using Storybook with VueJS. If you have any questions or run into any trouble, feel free to reach out on Twitter or Github....
Sep 18, 2020
4 mins
Leveraging the Power of GraphQL and NuxtJS
In this post, we'll talk about how to use GraphQL and NuxtJS to build performant apps!...
Aug 31, 2020
4 mins
Let's innovate together!
We're ready to be your trusted technical partners in your digital innovation journey.
Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.