How to import JS script in vue loader component?

Question

I have a vue-component

vue-compoennt (vue-loader)

<template>
  <p>This is a template</p>
</template>
<script>
  require('main.js')
  huha()
</script>

And I have

main.js

 var huha = function(){
      alert("this is huha");
    }; 
alert("this is simple alert");

Here I get the 'simple alert' but in assessing huha() it is showing reference error. Can someone please help me to understand why is this happening?

Edit

I am trying to use testimonial.js as following and I am getting reference error.

    <template>
      <p>This is a template</p>
      <div id="testimonial-slider"></div>
    </template>
    <script>
      require('testimonial/testimonial.js')
      require('testimonial/testimonial.css')
      var testimonial = new Testimonial('#testimonial-slider');
    </script>
    <style>
      p{
         color: red;
        }
    </style>

It is giving "reference error: Testimonial is not defined"

Actually i am using vue-loader webpack in this app. So in vue-component we write html, script and style in same file with extension '. vue-component' so i haven't defined a separate component. My component is 'vue-component' — Ashvini Kumar
– Ashvini Kumar, Commented Dec 9, 2015 at 17:44
module.exports only works with a compilar, like browserify. Whats your build process? — notANerdDev
– notANerdDev, Commented Dec 10, 2015 at 4:58

Helder Lucas · Accepted Answer · 2015-12-09 22:06:30Z

1

You need to export a function like so:

module.exports = {
    huha: function(){
      return alert("this is huha");
    }
};

And then in you components file:

<template>
  <p>This is a template</p>
</template>
<script>
  var main = require('main.js')
  main.huha()
</script>

answered Dec 9, 2015 at 22:06

Helder Lucas

3,3532 gold badges24 silver badges28 bronze badges

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

3 Comments

Ashvini Kumar Over a year ago

I have done this but it's not working? I require 'testimonial.js' library so when I do 'require("testimonial")' then use this libraries functions and objects then reference error is thrown.

Yauheni Prakopchyk Over a year ago

@AshviniKumar How exactly do you use the library? Every component is scoped. You're probably referencing the library out of scope.

Ashvini Kumar Over a year ago

@YauheniPrakopchyk I have updated the question, Please have a look at the edited version of the question

Collectives™ on Stack Overflow

How to import JS script in vue loader component?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related