Web developer, Curious Soul, twitter at @amjohnphilip

Better the performance of Vue.js applications by lazy loading of components.

Image for post
Image for post

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…


A guide for those getting started with Nuxtjs and its architecture

Image for post
Image for post

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-nuxt

The command will create a Nuxt application with the title getting-started-with-nuxt. …


Facing job rejections the better way as a developer

Image for post
Image for post

One of the most barely talked about topics is how to handle and face job rejections as a developer.

Once in a while job, rejections will come your way. Even the most skilled programmers once in a while had to face the fear of handling job rejections.
One time you were punching the keyboard with the best description of yourself you could ever provide to the dream company you have always yearned working with. Only for a two days later email reminder that you have not made it to the next round of the interview.

Everything seems perfect until this…


Step by step guide to publishing your package to NPM

Image for post
Image for post

This article is a guide on how to publish your favourite package to npm.
Publishing an open-source project to npm allows other developers to use your works.

This is one step to contributing to open-source. Many of the open-source projects we use most of them are published NPM packages from (React, Vue and Angular).

Your project can also get appreciation from other fellow developers who will find your project helpful. On top of all these, other fellow developers will also be interested in contributing to your amazing project.

Does that feel cool to you? well, follow along this article to…


Programming mistakes that Juniors make.

Image for post
Image for post

Being a junior programmer comes with a lot of challenges. From trying to master all the fashionable technologies out there to finding that dream job.

All these is not easy for most junior programmers breaking into the field.
Being a junior programmer is always frustrating and challenging in most of the scenarios.
In this article, we are going to see some of the mistakes junior programmers make which later makes their programming journey difficult.

1. Watching tutorials makes you a better programmer

Juniors always indulge too much of their time watching and reading tutorials than concentrating on building from those tutorials. …


Routing in Vue 3 explained with example

Image for post
Image for post

In this article we are going to learn how to handle routing in Vue 3. Routing in Vue 3 is a little different from how we did it in Vue 2. Otherwise, most of the features and how we handle things such as handling scrolls and navigation guards remain unchanged.

What we will learn.

  • Setting routing from scratch
  • Names routes
  • Handling error 404 (Not Found) pages
  • Installing from Vue CLI

Starting from Scratch

To install Vue 3 we can do so depending on your preferred package manager

Npm


npm i -g @vue/cli

Yarn


yarn global add @vue/cli

We can now create our Vue 3 application.


My own account of story and how I got rid of masturbation

Image for post
Image for post

This is my account story about my life and battling masturbation. I know many people always find themselves in the same situation that I was back then and I hope this piece would help them. Getting rid of masturbation has proven to be very difficult to get rid of.

All this started way back in 2016, that’s when I could say my eye opened much enough about sex. It was also then that I got introduced to pornography and other sources used to access it. I got so…


Scaling performance and optimization in Vue.js applications.

Image for post
Image for post

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…


Asynchronous loading in Vue 3 using defineAsyncComponent

Image for post
Image for post

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…


Dive into vue Composition API with example.

Image for post
Image for post

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. …

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store