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.
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:
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.
To create a fresh Nuxt application. Open your developer terminal and use the command below depending on your preferred package manager.
npm init nuxt-app getting-started-with-nuxt
The command will create a Nuxt application with the title getting-started-with-nuxt. …
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. …
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. …
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. …
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 init nuxt-app quote-generator
yarn create nuxt-app quote-generator
After 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. …
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.
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.
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. …
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. …
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:
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. …