A
A
alestro2020-12-07 21:58:39
Vue.js
alestro, 2020-12-07 21:58:39

How to connect a third party script to VueJs?

I tried to connect scripts via npm and further import to the script section and directly to the section via src. I also used vue loader, but none of the options work.
this is how my main.js looks like

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import LoadScript from 'vue-plugin-load-script';



Vue.config.productionTip = false


new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Vue.use(LoadScript);

Vue.loadScript("/assets/plugins/jquery/jquery.js")
Vue.loadScript("/assets/js/vendor.js")
Vue.loadScript("/assets/js/theme.js")
Vue.loadScript("/assets/plugins/lazysizes/lazysizes.js")
Vue.loadScript("/assets/plugins/parallax/parallax.js")


When I try to connect scripts through vue loader in main.js, I see the following in the console:
Klatz

Uncaught SyntaxError: Unexpected token '<'
Uncaught SyntaxError: Unexpected token '<'
vendor.js:1 Uncaught SyntaxError: Unexpected token '<'
theme.js:1 Uncaught SyntaxError: Unexpected token '<'
lazysizes.js:1 Uncaught SyntaxError: Unexpected token '<'
parallax.js:1

Import via
<script>
import 'jquery'
import 'jquery-parallax.js'
import 'lazysizes'
import './assets/js/theme.js'
</script>

in app.vue

also ends with an error:

click

parallax.min.js?c689:6 Uncaught ReferenceError: jQuery is not defined
at eval (parallax.min.js?c689:6)
at Object../node_modules/jquery-parallax.js/parallax.min.js (chunk-vendors.js:1153)
at __webpack_require__ (app.js:854)
at fn (app.js:151)
at eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/App.vue?vue&type=script&lang=js&:4)
at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/App.vue?vue&type=script&lang=js& (app.js:1007)
at __webpack_require__ (app.js:854)
at fn (app.js:151)
at eval (App.vue?7a5c:1)
at Module../src/App.vue?vue&type=script&lang=js& (app.js:1157)

Answer the question

In order to leave comments, you need to log in

1 answer(s)
V
Victor L, 2020-12-08
@Fzero0

import $ from 'jquery'
var $ = require('jquery')

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question