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

Question

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?

Daniel · Accepted Answer · 2018-12-04 18:58:14Z

1

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

answered Dec 4, 2018 at 18:58

Daniel

35.9k17 gold badges115 silver badges162 bronze badges

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

1 Comment

Chaitanya Mankala Over a year ago

What you answered is right. But, the real problem is with .Vue, you can't import modules into a vue component. You have to install into Vue prototype inorder to use that.

Chaitanya Mankala · Accepted Answer · 2019-04-03 13:58:35Z

0

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

answered Apr 3, 2019 at 13:58

Chaitanya Mankala

1,73418 silver badges24 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related