I'm building my first project using vue-cli and webpack and I'm not sure how to properly use an external JavaScript library to my project.
I want to add the Intro.js library which simply requires me to import the intro.js, add some tags to some HTML elements, and call the introJs().start() function.
I've installed the library with npm install introj.js --save
I've imported the library by adding import introJS from 'intro.js' into my <script> section of my App.vue file.
I've checked the compiled app.js file and I know introJS is being compiled so everything is good there.
My question is, where do I put introJs().start()? I tried putting it in the mounted() function of the App.vue file but that doesn't work.
Additional Info: When I try to run introJS().start() from the mounted () method in App.vue I receive this error: Error in mounted hook: "TypeError: __WEBPACK_IMPORTED_MODULE_7_intro_js___default(...) is not a function"
This should work:
const { introJS } = require('intro.js')
introJS().start()
Related
Hi I am using NuxtJS to build a VueJS application. I have installed an image cropping library vue-croppie. I have imported the Vue component as per the documentation like below
import VueCroppie from 'vue-croppie'
However, I am getting the following error on import statement
Could not find a declaration file for module 'vue-croppie'. 'xxx/node_modules/vue-croppie/dist/vue-croppie.cjs.js' implicitly has an 'any' type.
Try npm i --save-dev #types/vue-croppie if it exists or add a new declaration (.d.ts) file containing `declare module 'vue-croppie';
I have tried declaring index.d.ts file at the root of my project with following content but id doesn't solve the problem
declare module 'vue-croppie';
I have tried using require like below as suggested on other posts but of no use
const VueCroppie = require('vue-croppie')
I understand this is a Typescript issue but have no knowledge about Typescript. Can somebody throw more light on this. What is happening and how to fix it.
Thanks
The issue was I had not installed the plugin with VueJS app. Here is how to do it.
VueJS
We can use Vue.use to isntall a plugin before it can be used like below
import Vue from 'vue';
import VueCroppie from 'vue-croppie';
Vue.use(VueCroppie)
NuxtJS
In case of NuxtJS it is little different. The plugin is registered globally, here's how.
Create a file called vue-croppie.js under plugin folder. And add the following to it
import Vue from 'vue'
import VueCroppie from 'vue-croppie'
Vue.use(VueCroppie)
In your nuxt.config.js add this under plugins
{ src: '~/plugins/vue-croppie.js', ssr: false }
Now, the plugin will be available globally. So there is no need to import and can be used directly.
I'm trying to use hammer.js on my project, however I'm having trouble importing it. I have installed the library through npm by npm i hammerjs. Imported it on my main.js file as import 'hammerjs' and then when I do
var hammertime = new Hammer(myElement, myOptions)
hammertime.on('pan', function(ev) {
console.log(ev)
})
I get errors saying Hammer is not defined. What is the correct way to import libraries in vue?
You can include hammerjs with:
import * as Hammer from 'hammerjs'
A side note: You can do the same to include other libraries installed with npm in your vue project. For example, if you want to include ThreeJS In your .js or .vue files, simply type in:
import * as THREE from 'three'
if you want, install the wrapper hammerjs to vue, follow the link:
https://www.npmjs.com/package/vue2-hammer
otherwise, do you need include the lib on the index.html, but a don't recommend.
ps: I would like do comment, but i don't have reputation.
i'm new to VueJS CLI webpack.
I want to globally include my javascript files.
my main.js:
require('./assets/css/main.css');
require('./assets/js/vendor/jquery-2.2.4.min.js');
require('./assets/js/vendor/TweenMax.min.js');
require('./assets/js/vendor/device.min.js');
require('./assets/js/functions.js');
In functions.js i'm using functions from all of the libraries(jquery,device.js...)
I get the error:
Uncaught ReferenceError: TweenMax is not defined
...
Why cant i use the libraries in functions.js ? i'm confused.
Thanks in advance
That doesn't work because of how vue and webpack handle assets and static files.
Usually you would just install your module via npm like:
npm install gsap --save
That's for TweenMax you tried to use. You'll find it on npm here.
Then in the .vue file where you want to use it, you would just import and use it:
<script>
import {TweenMax} from 'gsap'
export default {
methods: {
myMethod () {
TweenMax.to()
}
}
}
</script>
If you want to use them in several components you could consider adding them as instance properties. Then you don't have to import them manually all the time.
My application has been simply generated by running this command:
vue init webpack
The template application has only vue-router installed by answering "Y" on the forth question of the wizard.
I want to include jquery from node_modules folder:
npm install --save jquery
then I add this
<head>
<script src="node_modules/jquery/dist/jquery.js"></script>
</head>
on the index.html page.
Next step:
npm run dev
application starts up correctly but I got 404 on jquery.js.
I had never touched anything in the whole application except for that line in index.html.
We have the same problem in a bigger application but we had no idea if we could reproduce on a smaller one... but we managed to do it.
you have to import it in your component. webpack manage the dependencies.
If you have used vue init webpack you are also using vue-loader so for adding jquery to the Hallo component you can do like this
first as you have already done npm install --save jquery
After that open the file App.vue and in the section add the import:
<script>
import Hello from './components/Hello'
import jquery from 'jquery'
export default {
name: 'app',
components: {
Hello
}
}
</script>
Not sure is what are you looking for but this is how you can add a 3rd party lib
When using Meteor 1.3 with Mantra spec, what are the 'right' way and place to load external client script, I mean some JS library which has to be included client-side, with <script>...</script> tag?
you can use npm or atmosphere for adding package or library. but if you want to add manualy using this meteor package kadira:dochead
use meteor add kadira:dochead
I created a addScript.js file inside client/configs with the following code:
import {DocHead} from 'meteor/kadira:dochead';
export default function () {
let addScript = 'https://link-to-your-script';
DocHead.loadScript(addScript);
}
And imported it in client/configs/context.js