Import Jquery into vue Js

Question

I am trying to use Jquery in collaboration wit another js framework called imagemapster however i receive this error "TypeError: $ is not a function". However i have imported the jquery module as expected. I imported jquery via npm into my node modules and then referenced it with require js. When i type $ in the console window i receive an undefined so i must be with how i am importing it.

code

<script>
const { $, jQuery } = require('jquery');
global.$ = $;
global.jQuery = jQuery;
//require( '../../../node_modules/jquery-imagemapster/dist/jquery.imagemapster.min.js');

export default {
    name: "Package",
    data: function() {
        return {
            packageImage: "../../../src/assets/images/package.png",
        }
    },
     mounted(){
        $(function() {
            $('#image').mapster({
                mapKey: 'id',
                fillColor: '000000',
                fillOpacity: 0.5,
                areas: 
                [{
                    key: 'firewall',
                    staticState: false
                },
                {
                    key: 'website',
                    staticState: false
                },
                {
                    key: 'server',
                    staticState: false
                },
                {
                    key: 'database',
                    staticState: false,
                    fill: false
                }]
            });
        });
    }
}

did you try with :" import $ from 'jquery' " ? you could also put "window.$ = require('jquery')" in your app.js — Dan M. CISSOKHO
– Dan M. CISSOKHO, Commented Oct 2, 2020 at 9:26
i got it to work using this import JQuery from 'jquery'; let $ = JQuery; however when i require the other js framework i receive this error Cannot read property 'defer' of undefined — ashley g
– ashley g, Commented Oct 2, 2020 at 9:29
whats global.? search require('jquery') vue, your find about 28m results — Lawrence Cherone
– Lawrence Cherone, Commented Oct 2, 2020 at 12:30

Dan M. CISSOKHO · Accepted Answer · 2020-10-02 12:24:38Z

My solution with my above comment and without iife:

<script>
import $ from 'jquery';
//require( '../../../node_modules/jquery-imagemapster/dist/jquery.imagemapster.min.js');

export default {
    name: "Package",
    data: function() {
        return {
            packageImage: "../../../src/assets/images/package.png",
        }
    },
     mounted(){
            $('#image').mapster({
                mapKey: 'id',
                fillColor: '000000',
                fillOpacity: 0.5,
                areas: 
                [{
                    key: 'firewall',
                    staticState: false
                },
                {
                    key: 'website',
                    staticState: false
                },
                {
                    key: 'server',
                    staticState: false
                },
                {
                    key: 'database',
                    staticState: false,
                    fill: false
                }]
            });
        
    }
}

Collectives™ on Stack Overflow

Import Jquery into vue Js

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related