Displaying Modals in a Vue App with the vue-js-modal Library

Displaying Modals in a Vue App with the vue-js-modal Library

A modal with many options. Displaying Modals in a Vue App with the vue-js-modal Library. Vue.js is an easy to use web app framework that we can use to develop interactive front end apps. In this article, we’ll look at Vue packages for adding modals with the vue-js-modal library.

Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.

In this article, we’ll look at Vue packages for adding modals with the vue-js-modal library.

vue-js-modal

The vue-js-modal package is a simple to use library for adding a modal to our app.

To use it, we install it by running:

npm i vue-js-modal

Then we register it by adding:

import Vue from "vue";
import App from "./App.vue";
import VModal from "vue-js-modal";

Vue.use(VModal);
Vue.config.productionTip = false;
new Vue({
  render: h => h(App)
}).$mount("#app");

Next, we can add it to our component by using the modal component:

<template>
  <div id="app">
    <button @click="show">open</button>
    <modal name="hello-world">
      <button @click="hide">hide</button>
      <p>hello, world!</p>
    </modal>
  </div>
</template>
<script>
export default {
  name: "App",
  methods: {
    show() {
      this.$modal.show("hello-world");
    },
    hide() {
      this.$modal.hide("hello-world");
    }
  }
};
</script>

We open the modal by passing in the value of the name prop to the show method.

Likewise, we do the same with the hide method to hide it.

We can call a method before the modal opens.

For instance, we can write:

<template>
  <div id="app">
    <button @click="show">open</button>
    <modal name="hello-world" @before-open="beforeOpen">
      <p>hello, world!</p>
    </modal>
  </div>
</template>
<script>
export default {
  name: "App",
  methods: {
    show() {
      this.$modal.show("hello-world", { foo: "bar" });
    },
    beforeOpen(event) {
      console.log(event.params.foo);
    }
  }
};
</script>

We passed in an object to the show method.

Then we’ll get that object in the event.params property.

It also comes with a simple version of the modal.

web-development javascript programming software-development vue vue.js

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Offshore Software Development - Best Practices

To make the most out of the benefits of offshore software development, you should understand the crucial factors that affect offshore development.

Top Vue.js Developers in USA

Vue.js is an extensively popular JavaScript framework with which you can create powerful as well as interactive interfaces. Vue.js is the best framework when it comes to building a single web and mobile apps.

Vue Tips — Login, GET Requests, and Serve Vue Project via HTTPS

Simple solutions for each. Vue.js is a popular framework for creating front end web apps. In this article, we’ll look at some tips for writing better Vue.js apps. Force Download with GET Request using Axios. We can make the response always download by passing our response data into the Blob constructor.