Importing external JavaScript file in VueJS - javascript

I'm using the Vue CLI and I want to import a JavaScript file that is hosted on another server. With everything I tried I get the same error as shown below.
How can I solve this problem? How can I import an external JS file?
My Vue file is shown below.
<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
<div id="app">
<p>Test</p>
<button #click="doSomething">Say hello.</button>
</div>
</template>
<script>
import TestFile from "https://.../src/TestFile.js";
export default {
data() {
return {
message: "<h1>anything</h1>"
}
},
async mounted() {
await TestFile.build();
},
methods: {
doSomething() {
alert(message);
},
},
};
</script>
<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
</style>

You cannot use import to fetch the modules from the URL, but there is a trick that you can do to use the scripts from the URL.
It's similar to attaching CDNJS's script. The solution is that you need to create the element and then append that element in the document's script.
The best solution would be, use a mounted lifecycle and then create and append it.
Example Importing FontAwesome CDN Script:
mounted() {
let fontAwesome = document.createElement('script')
fontAwesome.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js')
document.head.appendChild(fontAwesome)
},
In this way registering script will give you your functions access in global object window.
For example, now I can access some of the cool properties of FontAwesome like this:
window.FontAwesome.config

Related

How to include javascript inside template tag(or component)

What I'm trying to do
I need to use three(3) javascript libraries
[plugin1.js and plugin2.js] are plugins and depend on base.js
I'm trying to achieve this via <script> tag as shown below:
I'm doing this way because I was doing like this when I was using plain javascript.
<template>
<div class="video">
<script type="application/javascript" :src="`${publicPath}base.js`"></script>
<script type="application/javascript" :src="`${publicPath}plugin1.js`"></script>
<script type="application/javascript" :src="`${publicPath}plugin2.js`"></script>
</script>
...
</template>
What is the problem
There are undefined errors like Uncaught TypeError: blablabla_name is undefined
Libraries not loaded into same scope.
Question
How can I load these libraries into same scope?
It can be solved by adding your external script into the vue mounted() of your component
<template>
.... your HTML
</template>
<script>
export default {
data: () => ({
......data of your component
}),
mounted() {
let recaptchaScript = document.createElement('script')
recaptchaScript.setAttribute('src', 'https://www.google.com/recaptcha/api.js')
document.head.appendChild(recaptchaScript)
},
methods: {
......methods of your component
}
}
</script>

How can I modify a lazy loaded Webpack module path?

I have a Vue app which uses Webpack and dynamic imports:
// App.vue
<template>
<div>
<button #click="isBtnClicked = true">Load lazy component</button>
<LazyComponent v-if="isBtnClicked" />
</div>
</template>
<script>
export default {
name: 'App',
components: {
LazyComponent: () => import('./components/LazyComponent'),
},
data: () => {
return {
isBtnClicked: false,
}
}
}
</script>
// components/LazyComponent.vue
<template>
<p>Hello from lazy component</p>
</template>
When the button in the app is clicked, the Webpack runtime dynamically creates a <script> tag and appends it to the head of the document.
Is there a way to modify the src attribute of this generated <script> tag? I would like to add a dynamic query parameter to it appends the element to the DOM.
The currently generated tag looks something like:
<script charset="utf-8" src="/js/0.js"></script>
And I would like it to look like:
<script charset="utf-8" src="/js/0.js?mytoken=12345"></script>
where mytoken and 12345 are generated at runtime.
I am using webpack 4.44.0, vue 2.6.11, and vue-loader 15.9.3.
According to this and this it doesn't look like you can do this in webpack 4. I'm not entirely sure, but it looks like this pull request may allow it to be done in webpack 5.

How to Dynamically Import SCSS Stylesheets in Nuxt using an Environment Variable

We are running Nuxt in a monorepo and things are working well. We are utilizing a /base directory containing our reusable components and stylesheets, and each project has its own subdirectory within a /projects directory.
Our global variables/mixins are being added to the base nuxt.config.js via the #nuxtjs/style-resources module which we then extend and import into the project's own nuxt.config.js.
In our components, we are hoping to dynamically import a project-specific stylesheet using an environment variable. We currently have something like:
//component-name.vue
<template>
//Template things
</template>
<script>
export default {
data() {
return {
projectPrefix: process.env.PROJECT_PREFIX
}
}
}
}
</script>
<style lang="scss">
#import 'base/assets/styles/scss/_component-name.scss';
//We would like to import the JUST ONE of the following stylesheets based on projectPrefix
#import './projects/project-foo/assets/styles/scss/_component-name.scss';
#import './projects/project-bar/assets/styles/scss/_component-name.scss';
#import './projects/project-baz/assets/styles/scss/_component-name.scss';
...
</style>
At the moment, everything works fine in terms of the styles being displayed correctly per project. The problem is that we also include a bunch of unused styles in this way.
Does anyone know of a good solution for how we might be able to dynamically import a stylesheet based on an environment variable?
You could create a component for env variable. Something like:
<template>
<component-with-style-a v-if="projectPrefix === 'A'" />
<component-with-style-b v-else />
</template>
<script>
export default {
data() {
return {
projectPrefix: process.env.PROJECT_PREFIX
}
}
}
}
</script>

how to create html otomatic in template vue file

i want to create html inside template in vue, but i have to create manual,i using vscode editor
<template>
<div class="hello">
<h1>hellow word</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
in code above , even only create h1 i have to make open tag html dan create close, than take time
any body have solution
i have install many snippet but all is not working
Install plugin Vetur for Visual studio code and make sure your file extension is .vue

How to include external JavaScript library properly so that its class is avialable in VueJs component?

Below is the link to the JavaScript library.
https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.0/d3.min.js
By including this library in the view as following, my VueJs component can just utilizes its d3 class and any methods inside that class.
<html>
<body>
<div class="my-div-class"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.0/d3.min.js"></script>
<script src="{{ url (mix('/js/my-vuejs-component.js')) }}" type="text/javascript"></script>
</body>
</html>
Calling d3 class and its select() method in VueJsComponent, "my-vuejs-component.js":
const el = d3.select('.my-div-class');
It works fine, but my VueJsComponent complains that d3 is not defined. It makes sense because d3 has never been defined in VueJeComponent.
How to include external JavaScript library properly so that its class or methods are available in VueJs component?
Something like this would be great if we can make it possible in VueJsComponent:
<script>
// This line of code is not working, just give an idea if we can convert this library into a module and import its class inside VueJs component.
import d3 from "https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.0/d3.min.js";
export default {
methods: {
test() {
const el = d3.select(".my-div-class");
}
}
}
</script>
To be specific, I am working with Laravel 6.
Could you try to add the script below?
const script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.0/d3.min.js';
document.body.appendChild(script);

Categories

Resources