CODEWITHSUNDEEP
jqueryvue.jsbootstrap-vue
Jack022
Jack022

Reputation: 1297

VueJS - Jquery is not defined

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?

Upvotes: 2

Views: 1534

Answers (1)

Felipe Malara
Felipe Malara

Reputation: 1914

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.

Upvotes: 3

Related Questions