Issues using vue-js-modal component

Question

I followed directions on how to use the component from their documentation however I get TypeError: show is not a function

In my main JS file (app.js) I added the following and adding to my project using npm

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

The documentation states that I can now call a modal from anywhere in the app, so I created a page specific JS file and included the following to hide/show a modal with name="hello-world" on the page that included vue, app.js and the page specific profile.js file.

export default {
    methods: {
        show() {
            this.$modal.show('hello-world');
        },
        hide() {
            this.$modal.hide('hello-world');
        }
    }
}

When I load the page, I don't see the modal content, however when I click the link <a href="#" @click.prevent="show">Modal</a> I get an error about the show method TypeError: show is not a function

I am using laravel mix and verified that everything is being compiled as expected. Below is a how I am including JS files on the profile page:

<script type='text/javascript' src='/assets/js/manifest.js?ver=5.2.3'></script>
<script type='text/javascript' src='/assets/js/vendor.js?ver=5.2.3'></script>
<script type='text/javascript' src='/assets/js/app.js?ver=1569678574'></script>
<script type='text/javascript' src='/assets/js/profile.js?ver=1569678574'></script>

I am trying to "level up" my Vue and JavaScript experience, previously I just stuck to writing ES5 and my Vue was written without components and bound to a page specific Vue instance, so any help would be greatly appreciated!

EDIT

app.js

window.Vue = require('vue');

require('./global/header.js');

Vue.component('tabs', require('./components/Tabs.vue'));
Vue.component('tab', require('./components/Tab.vue'));

import VModal from 'vue-js-modal'

Vue.use(VModal)


new Vue({
    el: '#app'
});

profile.js

export default {
    methods: {
        show() {
            this.$modal.show('hello-world');
        },
        hide() {
            this.$modal.hide('hello-world');
        }
    }
}

webpack.mix.js that compiles profile.js

mix
  .js("resources/js/pages/home.js", "assets/js/home.js")
  .js("resources/js/pages/teams.js", "assets/js/teams.js")
  .js('resources/js/pages/profile.js', 'assets/js/profile.js')

Are you using the default frontend scaffolding from Laravel? — Vince
– Vince, Commented Oct 2, 2019 at 21:32
Also, can you show your full Vue code, rather than just the methods object? — Vince
– Vince, Commented Oct 2, 2019 at 21:34
@vince I'm using Mix on a WordPress project. I have edited original post to include app.js and profile.js — Cody
– Cody, Commented Oct 3, 2019 at 13:09
@vince I have a mix command that compiles page specific JS such as profile.js — Cody
– Cody, Commented Oct 3, 2019 at 13:11
Ah, I see. Well, I suspect that the problem has to do with the way you are compiling your scripts... Based on the error you are getting, when your show function runs, this.$modal is defined, but this.$modal.show is either undefined, or is a property rather than a function. What do you get if you change your show function to this: show() { console.log('$modal', this.$modal); }? — Vince
– Vince, Commented Oct 3, 2019 at 15:15

tony19 · Accepted Answer · 2022-07-15 04:48:12Z

2

+25

The error doesn't specify if its the $modal.show() function or your profile.js show() function that is undefined. I suspect that it's your profile.js show() function because it looks like everything is in order with regards to vue-js-modal.

You need to add profile.js as a vue mixin (https://v2.vuejs.org/v2/guide/mixins.html) in order for its functions to be added to the vue instance. So in your app.js add:

import profile from '/assets/js/profile'
Vue.mixin(profile);

edited Jul 15, 2022 at 4:48

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 3, 2019 at 17:08

sorayadragon

1,0877 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Issues using vue-js-modal component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related