CODEWITHSUNDEEP
javascriptjqueryvue.js
ashley g
ashley g

Reputation: 885

Import Jquery into vue Js

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
                }]
            });
        });
    }
}

Upvotes: 0

Views: 453

Answers (1)

Dan M. CISSOKHO
Dan M. CISSOKHO

Reputation: 1075

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
                }]
            });
        
    }
}

Upvotes: 1

Related Questions