Conditional Rendering in Nuxt

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, weve 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.