CODEWITHSUNDEEP
vue.jsvuejs2vue-router
Jagruti Varu
Jagruti Varu

Reputation: 41

What is an efficient way to import and use local javascript file in a vue js component?

I have written in script tag of Vue.js component as follows: 

require("./js/swiper.min.js");
require("./js/wow.min.js");
export default {
    mounted(){
         var swiper = new Swiper('.swiper-container',{pagination: '.swiper- 
         pagination', paginationClickable: true,});
         new WOW().init();
    } 
}

which results me the following error

[Vue warn]: Error in mounted hook: "TypeError: Cannot assign to read only
property 'exports' of object '#<Object>'"

It is working proper in index.html (a simple HTML file), but in Vue.js component it gives error.

Is it right way to use local javascript file in Vue.js?

Upvotes: 2

Views: 1982

Answers (2)

Chaitanya Mankala
Chaitanya Mankala

Reputation: 1704

In your case its right to include in index.html. But if you want to include your local modules or any js modules (not libraries), you can refer to this

Upvotes: 0

Daniel
Daniel

Reputation: 35684

this looks like a conflict between how exports works with require vs import

you can use require with module.exports and import with export defaults. Right now you're mixing them, which could lead to a problem.

This is explained well in here: https://github.com/almende/vis/issues/2934#issuecomment-292698456

You should not do things like:

// myModule.js
import x from 'module-x'
...
module.exports = something

instead:

common.js way

// myModule.js
const x = require('module-x')
// Here there is a trick, if module-x is exported as ES6 with a default export it would be
const x = require('module-x').default
...
module.exports = something

or

ES6 way

// myModule.js
import x from 'module-x'
...
export default something

Upvotes: 1

Related Questions