Better the performance of Vue.js applications by lazy loading of components.
Optimizing performance in Vue.js application is a very important factor to consider. An application with a higher performance score will ensure that users get the best of user experience.
It will also ensure the efficiency of the application itself.
What is Lazy Loading?
Lazy loading ensures that the components attached with the lazy load syntax are not loaded until they become visible.
Lazy loading as the name suggests is one of the best ways to improve performance of Vue.js application.
It is considered a good practice to lazy load components with:
- Toggled content
- Side panels
- Tabs
- Components which aren’t available or visible on initial page…
A guide for those getting started with Nuxtjs and its architecture
Nuxtjs is an open sourced framework that is built entirely on top of VueJS.
“Nuxt The Intuitive Vue Framework Build your next Vue.js application with confidence using NuxtJS. An open source framework making web development simple and powerful.”
Nuxtjs comes bundled with some amazing technologies such as the choice to use between server side rendered application and single page applications.
Creating a Nuxt application
To create a fresh Nuxt application. Open your developer terminal and use the command below depending on your preferred package manager.
NPM
npm init nuxt-app getting-started-with-nuxtThe command will create a Nuxt application with the title getting-started-with-nuxt. …
Scaling performance and optimization in Vue.js applications.
Performance optimizing of vue applications plays an important role in the application architecture.
A higher performance application will ensure an increase in user retention, improved user experience and higher conversion rates.
According to research by Google, 53% of the mobile users leave a site if it takes more than 3 seconds to load? On top of that, more than half of the pages tested have weighed more than 2MB.
Your app performance directly affects its search ranking and conversion rates. On the other hand, Pinterest reduced their initial wait time by 40%, which resulted in a 15% increase in search engine traffic and sign-ups. …
Asynchronous loading in Vue 3 using defineAsyncComponent
Vue3 is coming out here with amazing features. Vue 3 is coming bundles with a lazy loading feature.
We can take advantage of this amazing feature to improve the performance of our vue applications and optimization.
To asynchronously load a component, we will divert from the static import to asynchronous syntax.
Synchronous components loaded with a static import statement will be added to the existing application bundle.
If code-splitting is not used then the application core becomes larger, affecting the overall performance of our application.
To asynchronously load components in vue3 we need to first import a defineAsyncComponent from vue which will be responsible for asynchronously loading the components. …
Dive into vue Composition API with example.
If you have been using vue from the past there is no doubt you haven’t been using the Options API.
The Option API enables us to create vue components by declaring the data, methods, created and lifecycle hooks in components structure. There is another way we can create components using what is known as the Composition API. The Composition API will be a major part of vue3.
The Composition API was introduced to address the limits and drawbacks that comes with the use of Options API in creating components. …
Step by step guide on how to code a quote generator with Nuxt.js
In this article, we are going to make a simple random quote generator with Nuxtjs.
If you aren’t familiar with Nuxtjs check the article down below will get you up and started quickly with Nuxtjs.
First things first we are going to install a fresh Nuxtjs project
Npm
npm init nuxt-app quote-generatorYarn
yarn create nuxt-app quote-generatorAfter the installation is complete, open your developer terminal and run the command down below.
npm run dev This command will serve our application into the browser and hot reload it anytime we make changes.
Make a quote generator component
Navigate into the component’s directory and create a file name it Quotes.vue. …
Learn about created Vue.js lifecycle hook with example
What is a lifecycle hook?
Lifecycle hooks are pure functions whose context is bound to their instance. For this case, Vue.js lifecycle hooks should not be declared as arrow functions.
Why not arrow functions?
Lifecycle hooks should be pure functions since arrow functions have their context entirely bound to their parent context.
Accessing data, methods and computed properties using this in arrow functions will throw an undefined error on the Vue.js instance.
Created hook
This lifecycle hook is called synchronously after the data has been created. This occurs before $el setup, but after data observation, computed properties, watch/event callbacks, and methods have been set up.
The created hook allows you to add code which is run if the Vue instance is created. …
Step by step guide on how to deploy your static Nuxt.js application to Netlify
In this article we are going to look on how we can deploy a static NuxtJs application to Netlify.
Netlify is a hosting website that provides free hosting and a faster way to build and deploy sites on the fly.
We will be deploying our application right from our GitHub repository.
Netlify is very convenient, in that after making changes to our application and pushing the code to GitHub we get the updated version of our application.
First things first we need to create a GitHub repository of our application that we will be deploying to Netlify.
After creating our repository, we need to log into the Netlify website and link our GitHub account. …
Scroll indicator can be implemented in blogs for the user to know where he has scrolled to within a page
In this article, we are going to make a scroll indicator in Nuxt.js, if you are not familiar with Nuxt.js and its architecture please consider checking out this article. It will get you up to speed with Nuxt.js. We will be making something similar to what these sites such as xteam.com use.
Scroll indicator can be implemented in blogs for the user to know where he has scrolled to within a page. Some of the advantages of implementing a scroll indicator are:
- It provides a beautiful look to a webpage, especially when applied to blog articles.
- User can easily check his/her reading progress with ease. …
Master Tailwind CSS with this Cheatsheet
Tailwind CSS allows us to build modern websites with the respective classes without writing a single native CSS.
Just like other CSS libraries like Bootstrap, Tailwind also has responsive classes that we only need to specify in our application.
This article will get you up and started quickly with Tailwind to make beautiful websites and UIs.
Tailwind is amazing since we have to only to specify the respective classes and Tailwind CSS will take care of everything.
On top of that, we don’t have to worry about responsivity as all is taken care of by Tailwind on different devices.
A utility-first CSS framework packed with classes like flex, pt-4, text-centre and rotate-90 that can be composed to build any design, directly in your markup. From Tailwind.com. …
