How to import an API/Script.js and use its variables in a VUE project

Question

I'm testing an API that helps me with the project I'm working on, and it's possible to install your NPM, its name is "parallax-js", so I looked for how to import, however I didn't have any results in my research, and I can't understand how I import an external script into VUE.

Here's the way I'm trying to put my project together in VUE.

APP VUE

<template>
  <div id="app">

    <img alt="Vue logo" src="./assets/logo.png" data-depth="0.2">
    <HelloWorld msg="Welcome to Your Vue.js App" data-depth="0.2"/>
  
    {{alpha()}}

  </div>

  
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import '../node_modules/parallax-js/src/parallax.js'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  methods : {

    alpha(){

      let scene = document.getElementById('app');
      let parallaxInstance = new Parallax(scene);

    }

  }
}

</script>

The point is ... I want to know how to learn the best way to import an external script ... and how I use the variables and objects inside that script.

I already tried it, it didn't go wrong ... but still I can't use the API ... I can't use its functions as new Parallax(scene) — WEB Last Wolf
– WEB Last Wolf, Commented Jul 14, 2020 at 19:54

tony19 · Accepted Answer · 2022-07-15 02:42:57Z

1

{{alpha()}} it is not how you call a method. Usually this is done in mounted hook:

mounted() {
  this.alpha()
}

Also, it seems that you may want to learn the basics of VueJS, and this is not the right place. You can start with the VueJS documentation provided on their website (https://v2.vuejs.org/v2/guide/)

edited Jul 15, 2022 at 2:42

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jul 14, 2020 at 20:04

Igor Moraru

7,7491 gold badge15 silver badges28 bronze badges

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

1 Comment

WEB Last Wolf Over a year ago

Ok... this was of great help, but I'm still not able to use the new Parallax(scene) function from within the script/API

Jonathan Akwetey Okine · Accepted Answer · 2020-07-14 22:40:08Z

1

Like I said in the comment section you were supposed to import it and finally call your method when vue is mounted.

<template>
  <div id="app">
  <img alt="Vue logo" src="./assets/logo.png" data-depth="0.2" />
  <HelloWorld msg="Welcome to Your Vue.js App" data-depth="0.2" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import Parallax from "parallax-js";

export default {
name: "App",
components: {
HelloWorld,
},
methods: {
alpha() {
  let scene = document.getElementById("app");
  let parallaxInstance = new Parallax(scene);
 },
},
 mounted() {
 this.alpha();
 },
};
</script>

answered Jul 14, 2020 at 22:40

Jonathan Akwetey Okine

1,3203 gold badges17 silver badges18 bronze badges

4 Comments

WEB Last Wolf Over a year ago

That's what Igor Moraru just answered, and in return I will say the same thing ... it makes more sense the way it is calling alpha()... but the new Parallax(scene) function is not being recognized as a occupation

Jonathan Akwetey Okine Over a year ago

I don't really get your last statement if you could come again? Is the parallax still not working?

WEB Last Wolf Over a year ago

So... I solved this by changing the API... in fact, this post from StackOverflow needed to be "closed" or something else... I don't know if I asked the right question... however it is ... what you answered is right... but I think the API is having trouble calling some functions.

WEB Last Wolf Over a year ago

Yes ... but Igor Moraru already answered first he deserves the credit for the answer... I was just waiting for someone who could answer how I could get the script function and use it in my component.

Collectives™ on Stack Overflow

How to import an API/Script.js and use its variables in a VUE project

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related