Using vue-js-modal, how do I access the data passed to the modal?

You should register the plugin in the main.js file of your project, in this way:

import VModal from 'vue-js-modal'Vue.use(VModal)

Then you would be able to call the show function in any place of your project:

this.$modal.show('the-name-you-asigned-in-your-modal');

If you need to pass params to the modal you can easy receive them in the beforeOpen event handler:

//In the template    <modal name="hello-world" @before-open="beforeOpen"/>methods: {  beforeOpen (event) {    console.log(event.params.foo);  }}

I know you are pretty close to make it work, so I provide you with a working example so you can take it as reference:

1- Include plugin in your main.js file.

// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import VModal from 'vue-js-modal'Vue.config.productionTip = falseVue.use(VModal)/* eslint-disable no-new */new Vue({  el: '#app',  template: '<App/>',  components: { App }})

2- Create a component that contains the modal (Let's call it Modal.vue)

<template>  <modal name="hello-world" @before-open="beforeOpen">    <div class="wrapper">      <p>{{ itemToShow }}</p>    </div>  </modal></template><script>  export default {    name: 'HelloWorld',    data: function () {      return {          item: ''      }    },    computed: {      itemToShow: function () {        return this.item      }    },    methods: {      beforeOpen (event) {        this.item = event.params.item;      }    }  }</script><style scoped>  .wrapper {    height: 100%;    width: 100%;    background-color: black;  }</style>

3- Show the modal component

<template>  <div id="app">    <img src="./assets/logo.png">    <Modal />    <button @click="onClick">      CLICK HERE!    </button>  </div></template><script>  import Modal from './components/Modal'  export default {    name: 'app',    components: {      Modal: Modal    },    methods: {      onClick() {        this.$modal.show('hello-world', {item: 'Hello world'});      }    }  }</script><style>  #app {    font-family: 'Avenir', Helvetica, Arial, sans-serif;    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;    text-align: center;    color: #2c3e50;    margin-top: 60px;  }</style>