Forem: David Emaye

Understanding JavaScript Exports: Default Export vs. Named Export

David Emaye — Sat, 06 Jul 2024 06:46:19 +0000

When working with JavaScript modules, especially in frameworks like React, understanding the difference between default and named exports is crucial for writing clean, maintainable code.
This article explains these two export types, their differences, and when to use each.

Default Export

A default export is used to export a single value from a module. This value can be a function, class, object, or primitive and doesn't need a specific name. You can import it using any name, providing flexibility in structuring your imports.

In the example below, InnerPage is defined as a function component and exported as the module's default export:

// InnerPage.js
const InnerPage = () => {
  return <div>Inner Page</div>;
};
export default InnerPage;

Then, when importing this component, you can use any name:

// ParentPage.js
import AnyName from './InnerPage';

// Usage
<AnyName />

The ability to rename the import can be useful, particularly if the name conflicts with another identifier (name) in your module.

Named Export

A named export allows you to export multiple values from a module. Each export must be imported using its exact name, encouraging clarity in your code.

Below is how you can define and export a component using a named export:

// InnerPage.js
export const InnerPage = () => {
  return <div>Inner Page</div>;
};

When importing this component, you must use its exact name:

// ParentPage.js
import { InnerPage } from './InnerPage';

// Usage
<InnerPage />

This strict naming helps avoid confusion and clarifies what is being imported, which is particularly helpful in larger codebases.

Key Differences

Flexibility vs. Explicitness

default export offers more flexibility since you can import the exported value using any name. It is often used when a module has a single primary export.

import MyComponent from './MyComponent';

named export encourages clarity, requiring you to use the exact name of the export. It is useful when a module exports multiple values.

import { MyComponent, AnotherComponent } from './components';

Usage Context

default export is ideal for modules that export a single component, function, or value. It simplifies the import statement and keeps the code concise.

// MyComponent.js
const MyComponent = () => { /* ... */ };
export default MyComponent;

// App.js
import MyComponent from './MyComponent';

named export is suitable for modules that export multiple components or values. It makes the import statements more descriptive and helps in maintaining consistency.

// components.js
export const MyComponent = () => { /* ... */ };
export const AnotherComponent = () => { /* ... */ };

// App.js
import { MyComponent, AnotherComponent } from './components';

Combining Default and Named Exports

You can also combine default and named exports in the same module. It can be useful when a module has a primary export along with some secondary exports.

// utilities.js
export const helperFunction = () => { /* ... */ };

const mainUtility = () => { /* ... */ };
export default mainUtility;

When importing, you can access both the default and named exports:

// App.js
import mainUtility, { helperFunction } from './utilities';

// Usage
mainUtility();
helperFunction();

Conclusion

Understanding the difference between default and named exports is essential for writing clear and maintainable JavaScript code. Use default exports for simplicity and flexibility when a module has a single primary export. Use named exports to promote explicitness and clarity, especially when dealing with multiple exports.
By mastering these concepts, you can create more modular, readable, and maintainable codebases, making collaboration and future maintenance easier.

How to set up Font Awesome in React

David Emaye — Sat, 07 Jan 2023 09:48:48 +0000

Hello There 😊

In this article, we will learn how to implement Font Awesome icons library in a React project.

Introduction

Font Awesome is a popular icon library that provides scalable vector icons that can be customized with CSS. It is commonly used in web design and is easily recognizable by its iconic font and CSS styling. The library includes a wide variety of icons, including social media icons, user interface icons, and brand icons.

If you are new to react and don’t know how to integrate font awesome in react, or you are finding it hard to set up the font-awesome icons library in react and how to use it in react, this article is for you.

Prerequisites

To complete this tutorial, you will need the following:

A basic understanding of React before starting this tutorial.
Node.js installed locally. You can do so here; Install Node.js.

We will achieve our aim of this article by doing the following.

Setting up our react project.
Installing font awesome's SVG core package.
Installing font awesome's icon packages (We'll be using the Free icons).
Installing the font awesome react component.
Importing icons into each component.
Importing icons globally.

Setting up our react project

First, open your Visual Studio code's terminal or device's terminal and type the following command: npx create-react-app font-awesome-react

Doing this will create a react app named font-awesome-react and all the react packages needed for the project will be installed.
Next, we will navigate into the font-awesome-react folder by typing cd font-awesome-react into the terminal.

To start our project, we will type npm start. This will start the project on the development server.

Next, we will open the App.js file in the src folder, remove the original React element rendered there and replace it with any other element of your choice.

Installing font awesome's SVG core package

We will need to install the core package, which includes all the utilities, to make the icons work.

npm i --save @fortawesome/fontawesome-svg-core

Installing font awesome's icon packages

Next, we will install the icon packages in different styles: solid, regular, light, thin, and duotone.

Not all icons are free, so you can install the icon packages for the free icons or the pro icons.

Free Icons

These are the styles available for the free icons.

npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

Pro Icons

You must have a valid Pro Package Token and an active Pro Plan subscription to configure Pro access for your project if you intend to use the Pro packages, which offer additional icons and styles.

These are the styles available for the pro icons.

npm i --save @fortawesome/pro-solid-svg-icons
npm i --save @fortawesome/pro-regular-svg-icons
npm i --save @fortawesome/pro-light-svg-icons
npm i --save @fortawesome/pro-thin-svg-icons
npm i --save @fortawesome/pro-duotone-svg-icons
npm i --save @fortawesome/sharp-solid-svg-icons

Installing the font awesome react component

Now we will install the Font Awesome React component.

npm i --save @fortawesome/react-fontawesome@latest

After installing all the necessary packages above, we will navigate to our package.json file to see everything we have installed.

Importing icons into each component

For the purpose of this article, we will be creating a new page: IconPage.js, which we will then import into our App.js.

import IconPage from './IconPage'
import './App.css';

function App() {
  return (
    <div className="App">
      <IconPage />
    </div>
  );
}

export default App;

We would import some icons into the IconPage.js file.
To do this, we have to import FontAwesomeIcon into the file.
Then, we can add any free icon we need to the project by importing the icon from the package we installed earlier. e.g:
import { faPenNib } from '@fortawesome/free-solid-svg-icons'

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faPenNib } from '@fortawesome/free-solid-svg-icons'
import { faEnvelope } from '@fortawesome/free-solid-svg-icons'

const IconPage = () => {
  return (
    <div>
      <h3>How to use font-awesome in react</h3>
      <FontAwesomeIcon icon={faPenNib} />
      <FontAwesomeIcon icon={faEnvelope} />
    </div>
  )
}

export default IconPage

This is the output we get.

If you have so many icons to use in a single file, instead of importing them individually with multiple lines of code

import { faPenNib } from '@fortawesome/free-solid-svg-icons'
import { faEnvelope } from '@fortawesome/free-solid-svg-icons'

You can import them together in a single line.

import { faPenNib, faEnvelope } from '@fortawesome/free-solid-svg-icons'

...or you can import them globally, which we will discuss below.

Importing icons globally

To import icons globally, we will navigate to the App.js file. We will then import a library from the SVG core package we installed.

import { library } from '@fortawesome/fontawesome-svg-core'

Remember, we talk about the icons having different styles. We would be importing every icon style.
First, we have to know how these styles are represented.

Solid Style - fas
Regular Style - far
Light Style - fal
Duotone Style - fad
Brand Style - fab So we will be importing each style with what they are represented with.

import { fab } from '@fortawesome/free-brands-svg-icons'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'

We imported just these three because they are the only styles available for the free icon.
We will add all the imported styles to our library by adding this code below export default App; in the App.js file.

library.add(fab, fas, far)

This is how the App.js file will be now.

// import the library
import { library } from '@fortawesome/fontawesome-svg-core'

// import your icons
import { fab } from '@fortawesome/free-brands-svg-icons'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'

import IconPage from './IconPage'
import './App.css';

function App() {
  return (
    <div className="App">
      <IconPage />
    </div>
  );
}

export default App;
library.add(fab, fas, far)

Doing these, we have added Font Awesome Icons globally.
Now, let's see how to use the icons in the new file we will create. IconPageGlobal.js.

In the IconPageGlobal.js created, we will only import FontAwesomeIcon by typing:
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
To use the icons:

<FontAwesomeIcon icon="fa-solid fa-cart-shopping" />
<FontAwesomeIcon icon="fa-regular fa-eye" />

This is the IconPageGlobal.js file now.

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

const IconPageGlobal = () => {
  return (
    <div>
      <h3>How to use font-awesome Globally in react</h3>
      <FontAwesomeIcon icon="fa-solid fa-cart-shopping" />
      <FontAwesomeIcon icon="fa-regular fa-eye" />
    </div>
  )
}

export default IconPageGlobal;

And this is our result.

Conclusion

Importing icons globally is not recommended because it can make your package larger by including icons you won't be using. It is advised to import Font Awesome icons one at a time so that your final package sizes are as little as possible because you will only import the icons that you actually need.
To access the codes on this articles check this repository

Please leave a comment below to ask me anything! I’m always happy to talk and help.

Kindly Connect with me on Twitter and on Linkedin

Thanks for Reading!!! 😊

Write Code Faster in React (JSX Autocompletion)

David Emaye — Tue, 03 Jan 2023 08:28:17 +0000

Hello there, today we will be talking about emmet. For those who are still new to react.js and are struggling to write faster HTML (JSX) code in react.js, this article is for you.

We will be making use of VS code.

What is Emmet?

From Wikipedia:
Emmet is a set of plug-ins for text editors that allow for high-speed coding and editing in HTML, XML, XSLT, and other structured code formats via content assist.

In VS Code, it is already included by default for all HTML and CSS files, but we must make some additional configurations to enable Emmet support for HTML in React. As a result, writing HTML in React (.js) files is significantly quicker and simpler.

We navigate to settings by clicking on the gear icon or settings icon on the bottom left corner of our text editor, then selecting the settings option.
We click on an open file icon on the top right corner of our editor.

Which then opens a settings.json file.
We then add this block of json code below to the code already there.

 "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    }

Now open any component file in React and type .menu, and press the tab key and it will auto-complete it to

<div className="menu"></div>

Conclusion

Emmet is unique because it makes HTML typing faster and allows us to build a huge code block using a single statement.
Emmet boosts developer efficiency when it comes to typing in JSX and the developer experience overall.

Please leave a comment below to ask me anything! I’m always happy to talk and help.

Kindly Connect with me on Twitter and on Linkedin

Thanks for Reading!!! 😊

Modals, Popups, Lightbox, and Popover

David Emaye — Mon, 02 Jan 2023 20:39:17 +0000

Hi There 😊

This article will discuss modals, popups, lightboxes, and popovers and understand their differences.

A handful of the various ways that websites can improve user experiences include modals, popups, lightboxes, and popovers. They can assist users in completing activities quickly and easily, whether to display information or solicit input from them without changing the page or reloading the page.

Modals

A modal is a component that displays in front of a page's content and makes the page content inaccessible till it is closed. The user must engage with the modal to return to the main content by completing an action or closing it. Modals are often used to direct users’ attention to a necessary action or piece of information on a website or application.

To learn how to create a modal in nuxt.js, click here.

Popups

Popups are among the most widely used modal windowing techniques on the internet today. As its name implies, a popup is similar to a window on top of a webpage; it displays the material you specify in the middle of your design. The user can click through the popup window to continue surfing or press a button to close it.

Despite having very similar functions, popups and modals differ in how much attention they demand: Modals prevent you from interacting with other page elements, forcing the user to take quick action. On the other hand, if a user chooses not to interact with a popup, they can continue using the website while the popup is still on the screen waiting for them to deal with it. Popups are modeless by design, which explains why.

Lightbox

Lightboxes are a fantastic method to draw attention to crucial information on your website or to provide more details as a visitor scrolls down the page. They can be used to display additional information, such as forms and other papers, but are primarily employed as an image gallery, displaying images of products or other content that viewers may find interesting.

The most prevalent lightbox designs are picture galleries. Use picture galleries to display images of your products or other content that visitors to your website might find interesting.

Popover

The popover is less confusing since it is, in a sense, in line. When you click or move your mouse over a button or box, a message will appear that describes what will happen when you click the button or box. The popover is advantageous since it informs users of the potential outcomes of pressing a specific button. That isn't easy to understand, especially without a detailed lesson. The popover is excellent in this circumstance and will eliminate many potential issues.

Conclusion

You can see that you can access a wide range of popup-like solutions for your website. They are excellent for numerous uses, including chat boxes, newsletter registration forms, marketing popups, form submission confirmation cookies, ad displays, membership logins, and many more.

I hope this article gives a clear understanding of the differences between modals, popups, lightboxes, and popovers.

Please leave a comment below to ask me anything! I’m always happy to talk and help.

Kindly Connect with me on Twitter and on Linkedin

Thanks for Reading!!! 😊

How to Validate URLs in JavaScript

David Emaye — Mon, 02 Jan 2023 13:23:49 +0000

Ever wondered how to validate URLs in JavaScript? The process is surprisingly simple. On the internet, web pages, images, and videos can be recognized by their URLs (Uniform Resource Locators). They are used to send emails, transfer files, and perform a variety of other tasks. However, unknown URLs can be risky since they can direct users away from safe websites and toward hazardous ones. They can also create a number of attack paths, such as server-side request forgery and malicious script injection (SSRF). This article will take an in-depth look at how to validate URLs in JavaScript using two methods: URL constructor and regex.

What is a validated URL?

When you create a URL input with the appropriate type value, url, you get automated validation that the inputted text is in the proper form to be a legitimate URL. This process can reduce users' likelihood of incorrectly typing their website address or providing an invalid one.

A URL needs to be well-formed, which means it must adhere to all HTTP or HTTPS protocols. It also needs to point to a resource as a URL without an associated resource is invalid. Most web browsers place an address bar above the page showing a website's URL. An example of a standard URL might be http://www.example.com/index.html which denotes a protocol (http), hostname (www.example.com), and file name (index.html).

An application may include additional specifications in addition to having a "valid" URL. For instance, only accepting http: or https: and rejecting file: and other URLs. This may be okay depending on the application, but figuring it out requires some active design work. In order to resolve user difficulties and make recommendations, it also helps to know why the URL's validation failed.

Validating URLs with URL constructor

Browsers provide a URL constructor to parse and create URL objects that provide structured access to its parts. We may use the constructor to validate URLs in JavaScript because it will throw an error if a URL is invalid. The structured access can then approve or refuse based on application-specific components.

A string is passed into the URL constructor with the new keyword. If the string is a valid URL, it returns a new URL object which contains data like the host, hostname, href, origin, protocols, etc. If not, it returns an error:

const isUrlCorrect = new URL("https://www.example.com/");
console.log(isUrlCorrect)

When we log isUrlCorrect to the console, we get the following response.

Let's see the response we get when we pass in an invalid URL string.

const isUrlCorrect = new URL("example");
console.log(isUrlCorrect)

We get a TypeError because “example” is not a valid URL.

Creating a URL validator function with the URL constructor

We can create a URL validator function by creating a custom isUrlValid function using the URL constructor and a try...catch statement.

function isUrlValid(string) {
 try {
   new URL(string);
   return true;
 } catch (err) {
   return false;
 }
}

When the string passed as an argument to the isUrlValid function is a valid URL, it returns true. If not, it returns false.

Validating only HTTP URLs with the URL constructor

Apart from checking if a URL is valid, we might want to determine whether the string is a legitimate HTTP URL and prevent other legitimate URLs like "mailto:/mail@example.com."

Looking at the image above, we can see that the value of the protocol property is https. We can check the protocol attribute of the URL object to determine whether a string is a legitimate HTTP URL.

So, by utilizing the URL constructor and a try...catch statement as we did before, we will create a URL validator function by creating a custom isHttpValid function.

function isHttpValid(str) {
 try {
   const newUrl = new URL(str);
   return newUrl.protocol === 'http:' || newUrl.protocol === 'https:';
 } catch (err) {
   return false;
 }
}
console.log(isHttpValid('https://www.example.com/')); // true
console.log(isHttpValid('mailto://example.com')); // false

What did we do here? We checked whether the protocol property's value is equal to "http:" or "https:," returning true if it is and false if it is not.

Validating URLs using regex

Regular expressions or regex URL validation is another way to validate a URL in JavaScript. All valid URLs follow a specific pattern: protocol, domain name, and path. Sometimes a fragment locator or query string follows the path. You may use regex to search for such patterns in a string if you know the pattern that makes up the URLs. The string passes the regex test if the patterns are present. If not, it fails.

We can also use regular expressions to require HTTPS before we check the URL

function isUrlValid(str) {
 const pattern = new RegExp(
   '^(https?:\\/\\/)?' + // protocol
     '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
     '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR IP (v4) address
     '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
     '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
     '(\\#[-a-z\\d_]*)?$', // fragment locator
   'i'
 );
 return pattern.test(str);
}

The regular expression in the isUrlValid function above determines whether a string is a valid URL.

A regular expression allows you to detect invalid URLs in input strings. A regex, however, is complex and impractical in a real-world situation as it can be challenging to read, scale, and debug. Libraries are often a better option because of this.

Conclusion

In this article, we discussed what a validated URL is and what it looks like. We also discussed the risks that unidentified URLs pose to a web application. We began by utilizing the URL constructor to do simple URL validations and showed how to use it to check the validity of the URLs. Then, we demonstrated how to scan URLs for the most basic and essential information needed, such as all URLs containing a protocol, domain name, and path, using the regular expression method. We additionally explored the complexity and difficulty of using regular expressions to validate URLs.

Please leave a comment below to ask me anything! I’m always happy to talk and help.

Kindly Connect with me on Twitter and on Linkedin

Thanks for Reading!!! 😊

Originally published on Turing.

Differences between Google Tag Manager and Google Analytics

David Emaye — Sun, 01 Jan 2023 21:57:22 +0000

There is much misunderstanding regarding the distinction between Google Tag Manager and Google Analytics. And regarding the best course of action for one's own website's integration or implementation.

They differ significantly despite sounding similar and being free Google products. While Google Tag Manager is a marketing tag manager, Google Analytics is a tool for website analysis.
Although these two digital marketing tools may appear to have somewhat similar functionalities, the truth is that their designs are for various jobs and objectives. Marketing professionals should try to avoid picking one over the other. Instead, Google Tag Manager and Google Analytics work best together since they are complementary.

Let's review both Google solutions' fundamental features and benefits to clarify uncertainty. We'll highlight the variations and discuss how each may be applied to strengthen your marketing plan and make the most of your data.

What Is Google Analytics?

Google Analytics is a tool for measuring website traffic that offers in-the-moment statistics and analysis of visitor interaction. Google Analytics allows website owners to examine and evaluate users' interactions to improve their websites' performance. All forms of digital media, upstream web destinations, banner and contextual ads, email, and integrations with other Google products can be tracked by Google Analytics.

Some Benefits Of Using Google Analytics

Track Online Traffic: You can monitor all internet traffic sources with Google Analytics. It's essential to know where your website's visitors are coming from if you want to operate an online business. You may monitor the success of your efforts by identifying distinct traffic sources and comprehending why and how much traffic occurs on your website.
Provide Data Visualization: By creating more detailed and visually appealing charts, graphs, and spreadsheets, Google Analytics enables you to understand the collected data. As you build relevant and meaningful dashboards that are necessary for attaining business objectives, it enables you to measure your web performance efficiently.
Optimize Website Ranking: To raise the ranking of your website, you must study numerous SEO strategies. While using keywords is crucial, there are additional actions you could take to improve your online visibility. You will be able to choose the appropriate keywords, locate the ideal placements, and increase the exposure of your website with the aid of Google Analytics and Search Console. For the success of your business, the correct keyword strategy will boost web traffic and conversion.

What Is Google Tag Manager?

Google Tag Manager (GTM) is a free monitoring tool and management platform that enables users to add marketing tags or code snippets to their websites to monitor and gather marketing data. It enhances the quantity and quality of information gathered while enabling customers to quickly apply GTM tags without changing the code.

Some Benefits Of Using Google Tag Manager

Auto-Event Tracking: Auto-event tracking, a feature included with GTM, automatically logs events (such as clicks, form submissions, and time spent on the page) without using customized JavaScript code. Once you've activated certain triggers, GTM will immediately begin listening for specific website activities, albeit setup is required, and it's not as simple as clicking a button.
Users and Permissions Management: You have complete control over who can make what modifications using GTM. You can easily manage who has access to make changes (such as adding tags, macros, and rules) to the website. Options include no access, read-only, editing, and publishing rights.
Everything in One Place: GTM streamlines and enhances the process of employing tags because all the GTM tracking code is managed in a single location instead of being developed and managed on many platforms. It considerably increases efficiency to create and examine all deployed tags from a single, straightforward interface, as this eliminates repetition and potential errors.

Differences Between Google Analytics and Google Tag Manager

The purpose of Google Tag Manager was to avoid taking the role of Google Analytics. Instead, they complement one another to provide marketers with a versatile approach for tracking different statistics that is simple to maintain. The main distinction between the two is that GTM supports the deployment and management of marketing tags on your website, including conversion tracking tags. On the other hand, Google Analytics is a tool that aids in measuring and analyzing your website traffic and the effectiveness of those tags.

Third-Party Integration: Google Tag Manager cannot be integrated with third-party tools. However, Google Analytics can be integrated with other reporting systems. Integrating Google Analytics with external solutions has many advantages. Doing this gives you a fuller view of your website's traffic and user behavior. Additionally, it can assist you in determining which marketing initiatives are most successful and which components of your website require development. On the other hand, Google Tag Manager cannot be integrated with a third-party solution. GTM cannot be coupled with a CRM or data tool; it can only assist in managing website tagging. It is an independent piece of software and cannot be used with any other programs.
One can exit without the Other: Your developers can hard-code Google Analytics codes straight into your website. But if you need to publish modifications all the time, only developers can assist you. However, GTM allows you to independently add, change, and remove your Google Analytics tracking tags. Using Google Tag Manager, you can incorporate tracking scripts for Facebook, Google Ads, and other websites (leaving Google Analytics behind).
Data Source: While Tag Manager is made to manage tags (such as tracking codes) on your website, Google Analytics is made to gather information about visits to websites. This implies that while Tag Manager might make it simpler to manage and deploy tracking codes on your website, Google Analytics can provide you with more specific information about the visits to your website.
Processing and Storing of Data: Google Tag Manager does not process data, whereas Google Analytics does. Google Tag Manager only aids in the management of your website's tags, which might help to retain the organization of your website's code. With the aid of Google Analytics, we can assess the effectiveness of our website. We can learn more about the website's performance thanks to the information in Google Analytics. Marketers can use this information to track performance and conversion while making adjustments and enhancements.
Structure and User Interface: These two tools' architectures and user interfaces are also highly dissimilar. Your website or mobile application is represented by at least one property in the Google Analytics user interface. Your website is referred to as a "view," and a property might have multiple views. Numerous reports may make up a single view. The user interface of Google Tag Manager includes at least one container tag. Each container tag will identify a mobile website or app. You can include countless triggers, variables, and tags in container tags.

Conclusion

We should now be clear on the differences between Google Tag Manager and Google Analytics and their benefits.
Once again, Google Analytics and Google Tag Manager are two distinct platforms with various uses. Despite some similarities, the two platforms eventually differ from one another. Although both products are free to use, Google Tag Manager is more straightforward to use and understand than Google Analytics.

Do you prefer using Google Tag Manager or not when using Google Analytics? Tell us in the comments section below!

Kindly Connect with me on Twitter and on Linkedin

Thanks for Reading!!! 😊

Conditional Rendering in Nuxt (v-show, v-if, v-else)

David Emaye — Mon, 21 Nov 2022 19:06:22 +0000

What is Conditional Rendering?

It is a typical use case while designing an application in Nuxt or any other JS library or framework to show or hide items under certain conditions. The user interaction can be as straightforward as when we need to display a popup when a user hits a particular button and hide it when the user clicks outside the popup or on the cross icon (cancel button). Another example is a custom alert box, where we display an error message when an API request returns an error response and a success message when the API request returns a success response. Conditional rendering is the process of executing logic or drawing user interface elements based on specific situations.

The features that come with Nuxt are incredible. Conditional rendering, which enables us to render templates under specific circumstances, is one of the beautiful features.

This article will explore conditional rendering in Nuxt and examine various approaches to dealing with specific situations. The v-show, v-if, v-else, and v-else-ifdirectives can be used to implement conditional rendering in Nuxt, which will be covered below. Also, we will be looking at the differences between v-show and v-if.

v-show directive

The v-show directive is a Vue.js directive used to toggle an element's display CSS attribute so that it displays the data using inline styles. The data will become visible if its value is true; otherwise, it will become invisible.

<template>
 <div>
   <button v-show="isUserLoggedOut">Login</button>
 </div>
</template>

<script>
export default {
 data () {
   return {
     isUserLoggedOut: false
   }
 }
}
</script>

From the code snippet above, if the value of isUserLoggedOut is false, the Login button becomes invisible, and a style of display: none is added inline to the button tag, i.e., style="display: none;".

<div>
   <button v-show="isUserLoggedOut" style="display: none;">Login</button>
 </div>

If the value is true, the button becomes visible, and the style of display: none is removed from the button tag.

v-if directive

The v-if directive is used conditionally to render a block. Only if the directive's expression returns a truthy value will the block with the v-if attribute be shown. This implies that v-if will destroy and recreate the blocks when the conditional is toggled.

<template>
 <div>
   <button v-if="isUserLoggedOut">Login</button>
 </div>
</template>

<script>
export default {
 data () {
   return {
     isUserLoggedOut: false
   }
 }
}
</script>

From the code above, if the value of isUserLoggedOut is false, the button becomes invisible and is completely removed from the DOM. And when the value is true, the button is rerendered back to the DOM and becomes visible.

Difference Between v-if and v-show

Even though they both lead to the same outcome, these two directives are very different behind the scenes.
The critical difference is that v-if conditionally renders elements, and v-show conditionally displays elements. This implies that when the conditional is toggled, v-if will destroy and recreate items. While, v-show will always keep the element in the DOM and merely change its CSS to toggle its appearance.

When to use each one

It's critical to carefully examine when to use v-if and when to utilize v-show, just like all other development decisions.

If the elements are regularly turned on and off, v-show typically has a performance benefit. However, v-if typically has the advantage when it comes to initial render time.

Another thing to think about is that we can combine additional logic blocks with v-if when we utilize it. To add sophisticated logic to our program, we can use v-else and v-else-if blocks, which we will discuss below.

v-else directive

A block that does not satisfy the v-if directive's condition can be rendered using the v-else directive. For it to function, this directive must come just after the v-if directive.

<template>
 <div>
   <button v-if="isUserLoggedOut">Login</button>
   <button v-else>Logout</button>
 </div>
</template>

<script>
export default {
 data () {
   return {
     isUserLoggedOut: true
   }
 }
}
</script>

The Login button is visible from the code above, while the Logout button is invisible. If the value of isUserLoggedOut is false, the button becomes invisible and is completely removed from the DOM, and the Logout button becomes visible. And when the value is true, the Login button is rerendered back to the DOM and becomes visible, and the Logout button becomes invisible.

v-else-if directive

When we need to check more than two options, we can utilize v-else-if. Only one of the connected elements in the else-if chain will be visible.

<template>
 <div>
   <button v-if="isUserRegistered">Register</button>
   <button v-else-if="isUserLoggedOut">Login</button>
   <button v-else>Logout</button>
 </div>
</template>

<script>
export default {
 data () {
   return {
     isUserLoggedOut: false,
     isUserRegistered: false
   }
 }
}
</script>

From the code snippet we have above, another data condition has been added, which is isUserRegsitered. If the value of isUserRegsitered is true, the button becomes invisible, and the Login button becomes visible. Meanwhile, if the value of isUserLoggedOut is false, the button becomes invisible, and the Logout button becomes visible.

Conclusion

In this article, we’ve explained how v-if, v-else, and v-else-if can be rendered conditionally, how v-else and v-else-if work with v-if, and the difference between v-if and v-show.

Please leave a comment below to ask me anything! I’m always happy to talk and help.

Kindly Connect with me on Twitter and on Linkedin

Thanks for Reading!!! 😊

How to make a Nuxt.Js application SEO friendly

David Emaye — Fri, 31 Dec 2021 22:34:51 +0000

If you want to use Nuxt.js for your web application's quick and responsive UI, you need also to know how to use Nuxt.js to create an SEO-friendly application. In this article, we'll look at how we can improve the SEO performance of our Nuxtjs website.

What is SEO

SEO (Search Engine Optimization) is the process of taking efforts to improve the ranking of a website or piece of content on Google.
The main distinction between SEO and sponsored content is that SEO involves "organic" ranking, which means you don't have to pay to be in that spot. To put it another way, search engine optimization is the process of improving a piece of online material so that it appears near the top of a search engine's page when someone searches for something.

Nuxt.js and SEO

Nuxt, one of the most popular Vue frameworks for new web apps, can greatly improve your app performance and SEO. One of the most important Nuxt configurations is the mode, as it determines how your app is built, deployed, and served. There are three main types of web apps out there today:

Classic Single-Page App (SPA)
Universal/Isomorphic Web App (UWA)
Pre-Rendered Single-Page App

It is important to use the Universal mode for SEO and here is why:
In a classic SPA, the HTML served to the client is relatively empty, and JavaScript dynamically renders HTML once it gets to the client. Because of this, you may see a "white flicker" before the webpage is fully loaded.

While in a UWA, JavaScript renders the initial HTML the same way SPAs do, but now the JavaScript runs on your Nuxt server before the content is sent back to the client. This way, the client receives the rendered HTML immediately, and will behave like a classic SPA afterwards. This is done so that search engine crawlers can interpret and index our website's pages. As a result, Universal mode is important for SEO.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>New App</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/js/app.js"></script>
  </body>
</html>

Now that our setup is complete, we should install some npm packages to improve our SEO by adding a Dynamic Sitemap.

A sitemap is a blueprint of your website that help search engines find, crawl and index all of your website’s content. Sitemaps also tell search engines which pages on your site are most important. We will include a sitemap in our app, but first we must install the nuxt module.

npm install @nuxtjs/sitemap

yarn add @nuxtjs/sitemap

We only need to add an entry to our nuxt.config.js file after installing the sitemap module.

{
  modules: [
    '@nuxtjs/sitemap'
  ],
}

Next we Add Google Analytics.
Google Analytics is a web analytics service that provides statistics and basic analytical tools for search engine optimization (SEO) and marketing purposes.To use Google Analytics with Nuxtjs, simply install the following module.

npm install --save-dev @nuxtjs/google-analytics

yarn add --dev @nuxtjs/google-analytics

If you are using Nuxt < v2.9, you have to install the module as dependency (without --dev or --save-dev)

We also need to add an entry to our nuxt.config.js file after installing the Google Analytics module.

{
  buildModules: [
    '@nuxtjs/google-analytics'
  ],
}

Now we must link this nuxt application to our Google Analytics account. To do so, we must include the Google Analytics ID in nuxt.config.js.

export default {
  googleAnalytics: {
    id: 'UA-XXX-X'
  }
}

Now we Add Meta Tags
Nuxt lets you define all default tags for your application inside the nuxt.config.js file using the head property. This is very useful for adding a default title and description tag for SEO purposes or for setting the viewport or adding the favicon.

export default {
  head: {
    title: 'my website title',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: 'my website description'
      }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  }
}

Note that this code above will give you the same title and description on every page

Adding titles and meta for each page can be done by setting the head property inside your script tag on every page:

<script>
export default {
  head: {
    title: 'Home page',
    meta: [
      {
        hid: 'description',
        name: 'description',
        content: 'Home page description'
      }
    ],
  }
}
</script>

Use head as an object to set a title and description only for the home page

<template>
  <h1>{{ title }}</h1>
</template>
<script>
  export default {
    data() {
      return {
        title: 'Home page'
      }
    },
    head() {
      return {
        title: this.title,
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: 'Home page description'
          }
        ]
      }
    }
  }
</script>

Conclusion

That's all there is to it; these steps will undoubtedly boost your SEO performance. However, keep in mind that this isn't all there is to SEO; there are many other factors to consider.

Thank you for Reading

How to create a Modal Component in Nuxt

David Emaye — Thu, 19 Aug 2021 01:18:16 +0000

Hi There 😊

In this article, we will build a custom modal component with Nuxt.js. We will build this Modal component from scratch without using any CSS framework.

Introduction

First, we must understand what a Modal is.

A modal is a component that displays in front of a page content and makes the page content inaccessible till it is closed. To return to the main content, the user must engage with the modal by completing an action or by closing it. Modals are often used to direct users’ attention to an important action or piece of information on a website or application.

If you are a frontend developer, I think you should know that modals are ubiquitous UI elements on the web.

Prerequisites

To complete this tutorial, you will need:

A basic understanding of Vue or Nuxt before starting this tutorial.

We are going to implement the modal component shown above in our Nuxt project through the following steps.

Creating a modal component
Add styling
Handle show/hide modal
Implement the Close event
Close modal by clicking outside the modal

Based on the requirement of understanding of Vue or Nuxt which I made mention of above, I’m assuming that we are familiar with how to create a Nuxt app and basic styling with CSS.

Let's get started

1. Creating our modal component.

An example of a modal layout

Basically, we would be working on what is important to this article and that is implementing the modal, so we won't be styling the main page.

Let's start by creating our modal component on /components/SavedModal.vue that is, we are creating SavedModal.vue inside the components folder.

Here we have our code for SavedModal.vue



<template>
  <div class="modal-overlay">
    <div class="modal">
      <img class="check" src="~/assets/check-icon.png" alt="" />
      <h6>Saved!</h6>
      <p>Your Details have been saved Successfully</p>
      <button>Go Home</button>
    </div>
    <div class="close">
      <img class="close-img" src="~/assets/close-icon.svg" alt="" />
    </div>
  </div>
</template>

<script>
  export default {
}
</script>

Code explanation

A class of modal-overlay i.e class="modal-overlay" was given to the root div which acts as the background overlay when the modal appears.
Then a class of modal i.e class="modal" was given to the second div element after the root element. This acts as the main modal.

2. Adding Style to our code.



<style scoped>

.modal-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  background-color: #000000da;
}

.modal {
  text-align: center;
  background-color: white;
  height: 500px;
  width: 500px;
  margin-top: 10%;
  padding: 60px 0;
  border-radius: 20px;
}
.close {
  margin: 10% 0 0 16px;
  cursor: pointer;
}

.close-img {
  width: 25px;
}

.check {
  width: 150px;
}

h6 {
  font-weight: 500;
  font-size: 28px;
  margin: 20px 0;
}

p {
  font-size: 16px;
  margin: 20px 0;
}

button {
  background-color: #ac003e;
  width: 150px;
  height: 40px;
  color: white;
  font-size: 14px;
  border-radius: 16px;
  margin-top: 50px;
}
</style>

3. Handle show/hide modal

To make our modal show, we are going to work on the main page which is index.vue.

We won't be implementing the whole page, but only the sections important to our aim, which is to make the modal function well

Here we have our code for index.vue

First, let's import our modal component to index.vue.



      </div>
    </div>
    <SavedModal v-show="showModal" />
  </div>
</template>

<script>
import SavedModal from '~/components/SavedModal.vue'

export default {
  components: { SavedModal },
  data() {
    return {
      showModal: false,
    }
  },
}
</script>

What did we do up here?

We imported the SaveModal component and then added a v-show directive with a data property of showModal to conditionally display the <SavedModal/>element. i.e v-show="showModal".

Then we returned the data property of showModal with a value of false.
This means <SavedModal /> modal would only display if the returned value becomes true.

Let's now work on how to change the returned value from false to true

We would be adding an @click event to the Save button which would change the returned value from false to true and would trigger the modal to appear.



<div class="save-btn">
    <button @click="showModal = true">Save</button>
</div>

In the code above we made showModal have a value of true and added it to the @click event.
This means anytime the Save button is clicked the @clicked event changes showModal's value from false to true and triggers the modal to appear.

Now that our modal can appear when the save button is clicked, let's go to the next step.

4. Implementing the Close event

We would be modifying SavedModal.vue to implement the close event.



<template>
  <div class="modal-overlay">
    <div class="modal">
      <img class="check" src="~/assets/check-icon.png" alt="" />
      <h6>Saved!</h6>
      <p>Your Details have been saved Successfully</p>
      <button>Go Home</button>
    </div>
    <div class="close" @click="$emit('close-modal')">
      <img class="close-img" src="~/assets/close-icon.svg" alt="" />
    </div>
  </div>
</template>

Why did we add @click="$emit('close-modal')" to the close button?

We added an @click event which sends a 'close-modal' event using $emit to the parent component which is the index.vue page.

$emit in Vue is primarily used for sending custom events between child components upwards to parent components.

Since we are sending a 'close-modal' event to the modal element on the index.vue page, we would also need to modify it, to make our close button function the way it should.



      </div>
    </div>
    <SavedModal v-show="showModal" @close-modal="showModal = false" />
  </div>
</template>

Since 'close-modal' is a custom event sent from the @click event on the child component which is the SavedModal.vue page, it automatically acts as an @click event here on the parent component (index.vue page).

So we made showModal have a value of false and added it to the @close-modal event.

Therefore when the close button is clicked on the SavedModal.vue page, it sends an event to the index.vue page that triggers the @close-modal event which changes showModal's value from true to false and makes the modal to close.

Now to the last step

5. Close modal by clicking outside the modal

We would be modifying the SavedModal.vue page to also implement this.



<template>
  <div class="modal-overlay" @click="$emit('close-modal')">
    <div class="modal" @click.stop>
      <img class="check" src="~/assets/check-icon.png" alt="" />
      <h6>Saved!</h6>
      <p>Your Details have been saved Successfully</p>
      <button>Go Home</button>
    </div>
    <div class="close" @click="$emit('close-modal')">
      <img class="close-img" src="~/assets/close-icon.svg" alt="" />
    </div>
  </div>
</template>

We added @click="$emit('close-modal')" to the root div with the class of class="modal-overlay" so as to trigger the close event when the overlay is clicked.

When @click="$emit('close-modal')" is added to the root div, every other element inside the root div would be affected by the event. So we added @click.stop to the div with class="modal" class to stop the event from affecting it or any other element inside the div.

Here is a visual of our result.

So we've achieved our aim which was creating a modal component and making it function the way it should.

I hope this article gives a clear understanding of how modals function and how to implement them.

Here is a link to the complete code https://github.com/Emodot/Creating-Modal-Components

Please leave a comment below to ask me anything! I’m always happy to talk and help.

Kindly Connect with me on Twitter and on Linkedin

Thanks for Reading!!! 😊

Dynamic Routing in Nuxt

David Emaye — Mon, 16 Aug 2021 23:45:31 +0000

Hello there 👋

In this article, we will be talking about Dynamic Routing in Nuxt.

With Dynamic routing, we can use route changes as the conditions and render components without changing the layouts or pages completely.

Dynamic routing allows rendering your Vue components conditionally.

Vue encourages developers to use components as fundamental building blocks of web applications. This allows us to render separate components on the same page based on the conditions we like.

For example, let’s assume a requirement to display a table list of users and open a page for the user details when a particular user is selected from the table list.

With dynamic routing, you can use 2 pages components to achieve this.

First, we use the route /users which is saved as users.vue to load the table list of users when the page loads. Then we use a dynamic page using a route like /users/:userId which is saved as _users.vue inside a folder of users to load the user details

Image of the user details when a role on the table list is clicked

Getting Started

Let's quickly go over how to implement the above image.

First of all, we must learn about Dynamic Pages.

Dynamic pages can be created when you don't know the name of the page due to it coming from an API or you don't want to have to create the same page over and over again. To create a dynamic page you need to add an underscore before the .vue file name. You can name the file or directory anything you want but you must prefix it with an underscore. e.g _dynamicpage.vue.

So for our file, we would be creating a folder named users then saving it inside the folder with the name _users.vue

Then we create our Html component for _users.vue

<template>
  <div class="content">
      <div class="row-1">
        <div>
          <h6>User ID</h6>
          <p>{{users._id}}</p>
        </div>
        <div>
          <h6>Name</h6>
          <p>{{users.name}}</p>
        </div>
        <div>
          <h6>Age</h6>
          <p>{{users.age}}</p>
        </div>
      </div>
      <div class="row-2">
        <div>
          <h6>Phone Number</h6>
          <p>{{users.number}}</p>
        </div>
        <div>
          <h6>Course</h6>
          <p>{{users.course}}</p>
        </div>
        <div>
          <h6>Gender</h6>
          <p>{{users.gender}}</p>
        </div>
      </div>
      <div class="row-3">
        <div>
          <h6>Email Address</h6>
          <p>{{users.email}}</p>
        </div>
        <div>
          <h6>Origin State</h6>
          <p>{{users.state}}</p>
        </div>
        <div>
          <h6>Reg Date</h6>
          <p>{{users.date}}</p>
        </div>
      </div>
  </div>
</template>

To the main part, our script section

Since we would be getting our user's data from an api, we would be calling an api request. (I would be writing an article on how to get data from an api using different methods)

<script>
export default {
  data() {
    return {
      users: {}
    }
  },
  created () {
    this.getUsersById()
  },
  methods: {
    async getUsersById () {
      const userIdPromise = await fetch(`https://sample.api.com/users/id/${this.$route.params.users}`)
      const userIdJson = userIdPromise.json()
      userIdJson.then((res) => {
        this.users = res.data
      })
    }
  }
}
</script>

While calling our api request, we added ${this.$route.params.user} behind the api link.

What does this do??

We used ${this.$route.params.user} to access the current route parameters within our local page.

For example, if we have a dynamic student page (student/_matricnumber.vue) and we want to access the matricnumber parameter to load the student or process information, we could access the variable like this: this.$route.params.matricnumber.

Since our dynamic page is fixed let's work on the main page /users.vue.

<template>
  <div>
    <table>
      <tr class="table-head">
        <th class="sn td-th">User ID</th>
        <th class="td-th">Name</th>
        <th class="td-th">Reg Date</th>
        <th class="td-th">Email Address</th>
        <th class="td-th">Course</th>
        <th class="td-th">Action</th>
      </tr>
      <tr 
      v-for="users in userTable" 
      :key="users._id" class="table-body" 
      @click="$router.push(`/user/${users._id}`)">
        <td class="sn td-th">{{ users._id }}</td>
        <td class="td-th">{{ users.name }}</td>
        <td class="td-th">{{ users.date }}</td>
        <td class="td-th">{{ users.email }}</td>
        <td class="td-th">{{ users.course }}</td>
      </tr>
    </table>
  </div>
</template>

what did we do??

We added an on-click function @click to the user row telling it to navigate to our dynamic page when clicked on and should also give it a url of the particular user Id i.e /user/${users._id}

So now, lets get our table data from the api

<script>
export default {
  data() {
    return {
      userTable: []
    }
  },
  created () {
    this.getUsers()
  },
  methods: {
    async getUsers() {
      const promise = await fetch('https://sample.api.com/users')
      const usersJson = promise.json()
      usersJson.then((res) => {
       this.userTable = res.data
      })
    }
  }
}
</script>

Summary

In this article, I explained how to transfer dynamic IDs or strings generally between pages using the vue $route object. As I mentioned earlier, It is especially useful to extract data from the backend when the API requires the ID of an entity.

Please feel free to engage and comment below to ask me anything! I’m always happy to talk and help.

Thank you for Reading !!!

Useful Resources

The Route Object