How to add my own JS file to App.vue or Index.html


#1

I am trying to add my JS File to App.vue and Index.js. But it doesn’t allow me.

It doesn’t render this JS and that functions doesn’t work.

What is best way to import this JS


#2

Just install then import them as npm dependencies:

import 'jquery'
import '...'

For anything else you can download to a vendor folder and import from there.

The bundled scripts will then be added to index html by webpack.


#3

Can you give me sample code please… i have been trying since 3-4 days and no luck…

i tried all possible ways.


#4

i tried all possible ways.

Obviously not!

# console
npm install 'jquery'
// main.js
import 'jquery'

var $ = window.jQuery

That should include jQuery which I presume will add jQuery to the window object.

If you need to use it locally, try

// some file
import $ from 'jquery'

$('body').blah()

There’s more info here about how to set up your env so your IDE / linter “knows” about jQuery:

Yes, it’s more hassle than just including script tags, but this is the way it’s done these days; there are various advantages I won’t cover here :slight_smile:

Also, if you’re using jQuery with Vue in this manner, I suspect you’re not building an SPA, so you might consider putting Vue into a script tag, and just inserting Vue where you need it in your existing app.


#5

=> Where to read on about the vendor folder and how to import thoese files to index.html?