Mastering Reusable Modals in Vue.js: Enhancing UI Flexibility

Check this post in my web notes

Navigating user interactions on a website involves a multitude of methods, and one of the most versatile tools in this realm is the modal window. A modal serves as a dialog box or popup window, seamlessly overlaying the current page. Whether prompting user actions, conveying vital information, or clarifying complex data, modals play a pivotal role in user experience. Understanding how to construct them and, more importantly, how to create reusable modals is key. By mastering the art of building modals that can be utilized across various tasks, developers can maintain consistency in their application's style and provide a streamlined and intuitive user interface. In this exploration, we delve deep into the techniques of crafting reusable modals in Vue.js, empowering developers to enhance UI flexibility and optimize user engagement.

Okay let's stop talking and get to work.

Initial Project Setup

We will create a Vue js project using Quick Start instructions from Vue js official documentation.

Execute the following command to create a vite project:

npm create vue@latest

This command will install and execute create-vue, the official Vue project scaffolding tool.

Once executed, you will be asked some questions.

If you are unsure about an option, simply choose "No" by hitting enter for now. Once the project is created, follow the instructions to install dependencies and start the dev server:

Now you should visit offered "localhost:" route, and you'll see initial project. You can remove all components and styles we will not need it.

Setting up the starter app with modal component

I will create a simple page (for testing purposes) with three buttons that will call different modals (one reusable window with different content).

<template>
  <main>
    <div class="gradient-background">
      <header>
        <h1>Mastering Modals</h1>
      </header>
      <div class="button-container">
        <button @click="openModal()">Button 1</button>
        <button @click="openModal()">Button 2</button>
        <button @click="openModal()">Button 3</button>
      </div>
    </div>
  </main>
</template>

So we need to create a modal component and add it to our main App.vue component. Also, let's add a element. The element is a slot outlet that indicates where the parent-provided slot content should be rendered. In such a way we will make our modal window reusable, and send different data into the modal. I will add a simple dynamic header and paragraph, but you can add even another component, so when the modal is rendered on the webpage it will add the functionality you need. And "close()" function that will ask the parent component to close the modal window.

<template>
  <main class="modal-container">
    <div class="modal">
      <div class="modal-header">
        <slot name="header"></slot>
      </div>
      <div class="modal-content">
        <slot name="content"></slot>
      </div>
      <div class="modal-footer">
        <button @click="buttonClicked()">Yes</button>
        <button @click="close">No</button>
      </div>
    </div>
  </main>
</template>

<script>
  export default {
    name: 'Modal',
    methods: {
      close() {
        this.$emit('close');
      }
    },
  };
</script>

Now we will update our page. We will import and add modal component inside the template, also we will write all slots data that will be added into modals. We will create three variables that will store our header, and paragraph and show/hide modal status. "openModal()" function that will update the data of our variables.

Okay, okay I know that it is better to check the code and not read the description )))

Continue reading...