Menu
I am working on a project that requires using a js plugin. Now that we're using vue and we have a component to handle the plugin based logic, I need to import the js plugin file within the vue component in order to initialize the plugin.
Previously, this was handled within the markup as follows:
<script src="//api.myplugincom/widget/mykey.js "></script> This is what I tried, but I am getting a compile time error:
MyComponent.vue
import Vue from 'vue'; import * from '//api.myplugincom/widget/mykey.js'; export default { data: { My question is, what is the proper way to import this javascript file so I can use it within my vue component? ...
513
There are two ways to import a JavaScript library to the Vue Component. The first is to import a local JavaScript library. Here, you can import the JavaScript library by using the 'import' keyword inside the script tag of your Vue file. import * as mykey from '../assets/js/mykey.
Add a script tag inside your Vue component template. This is the easy fix I have found. Just add the script into the component template. But don't forget to add, type="application/javascript" to the script tag otherwise it will show an error during the build. However, if you have added document.
In Vue. js, components can be written in HTML, CSS, and JavaScript without dividing them into separate files.
Try including your (external) JavaScript into the mounted hook of your Vue component.
<script> export default { mounted() { const plugin = document.createElement("script"); plugin.setAttribute( "src", "//api.myplugincom/widget/mykey.js" ); plugin.async = true; document.head.appendChild(plugin); } }; </script> Reference: How to include a tag on a Vue component
In the case that you would like to import a local JavaScript in your Vue component, you can import it this way:
MyComponent.vue
<script> import * as mykey from '../assets/js/mykey.js' export default { data() { return { message: `Hello ${mykey.MY_CONST}!` // Hello Vue.js! } } } </script> Suppose your project structure looks like:
src - assets - js - mykey.js - components MyComponent.vue And you can export variables or functions in mykey.js:
export let myVariable = {}; export const MY_CONST = 'Vue.js'; export function myFoo(a, b) { return a + b; } Note: checked with Vue.js version 2.6.10
82
try to download this scriptimport * from '{path}/mykey.js'.
or import script<script src="//api.myplugincom/widget/mykey.js"></script> in <head>, use global variable in your component.
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
