VueJS - Jquery is not defined

user_10290511 0
Viewed 975

I'm trying to create a Vue component that uses a premade css style, but the problem is that i keep getting the following error, since the template uses bootstrap and bootstrap uses some jquery:

custom.js?2435:952 Uncaught ReferenceError: jQuery is not defined

Code:

component.vue

<template>
    <html>
        <body>
        ...
        </body>
    </html>
</template>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script src="./Crypo/assets/js/jquery-3.4.1.min.js"></script>
<script src="./Crypo/assets/js/popper.min.js"></script>

<script src="./Crypo/assets/js/amcharts-core.min.js"></script>
<script src="./Crypo/assets/js/amcharts.min.js"></script>
<script src="./Crypo/assets/js/jquery.mCustomScrollbar.js"></script>
<script src="./Crypo/assets/js/custom.js"></script>

<style scoped src="./Crypo/assets/css/style.css"></style>

The Crypo folder is in the same folder as component.vue. I don't understand why isn't jQuery defined even though i'm importing it. I tried to add to my code

import jQuery from 'jquery'

But i'm still getting the error. Any solution to this?

bootstrap-vue vue.js jquery
1 Answers

You have some options here:

Or you put these links into the index.html

- public
  - index.html

As it in here:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="./Crypo/assets/js/jquery-3.4.1.min.js"></script>
    <script src="./Crypo/assets/js/popper.min.js"></script>
    <script src="./Crypo/assets/js/amcharts-core.min.js"></script>
    <script src="./Crypo/assets/js/amcharts.min.js"></script>
    <script src="./Crypo/assets/js/jquery.mCustomScrollbar.js"></script>
    <script src="./Crypo/assets/js/custom.js"></script>    
    ...

Or instead you install everything through npm (prefered) using bootstrap-vue

npm install vue bootstrap-vue bootstrap

And import it in your app entrypoint like this:

import Vue from 'vue'
// bootstrap lib import
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
// css imports
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Install BootstrapVue
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

Another thing is, you shouldn't use html nor body tags in vue components, they should be used only in the index.html file.

user_127018480
Related