CODEWITHSUNDEEP
javascriptvue.js
WEB Last Wolf
WEB Last Wolf

Reputation: 122

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

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.

Upvotes: 0

Views: 396

Answers (2)

Igor Moraru
Igor Moraru

Reputation: 7729

{{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/)

Upvotes: 1

Jonathan Akwetey Okine
Jonathan Akwetey Okine

Reputation: 1295

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>

Upvotes: 1

Related Questions