Include JS library using vueJS laravel

Question

I'm using vue-cli with webpack and Laravel. Loading js files like jQuery from cdn in my app.blade.php is working but i don't want to include my files from cdns...

using

require('@/js/assets/jquery.js');

in app.js is not working. When a look at the complied app.js in my browser it seems that jQUery is imported but i have an error saying "$ is undefined".

This is the same for every js /css files i'm trying to add in my vue app.

app.blade.php :

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{csrf_token()}}">
        <title>MTM</title>
        <link href=" {{ asset('css/app.css') }}" rel="stylesheet">
   </head>
   <body>
        <div id="app">
        <app></app>
   </div>
        <script src="{{ asset('js/app.js') }}"></script>
   </body>
   </html>

webpack.mix.js:

const mix = require('laravel-mix');
mix.webpackConfig({
    resolve:{
        extensions:['.js','.vue'],
        alias:{
            '@': __dirname + '/resources'
        }
    }
})
mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

app.js

require('@/css/Semantic-UI-CSS-master/semantic.css');
require('@/js/assets/jQuery.js');
require('@/js/assets/semantic.js');
require('@/js/assets/tablesort.js');

No i have some imports before but placing them first is not solving the probleme... — yevic tabita
– yevic tabita, Commented Feb 11, 2019 at 10:30

Sebastian · Accepted Answer · 2019-02-11 10:49:36Z

2

You just import the module itself but you need to assign jQuery to a variable if you want to use it with $ within your app.js module.

Eg. in your app.js:

var $ = require('@/js/assets/jQuery.js');

If you want to use jQuery globally you have to assign it to a global variable like this:

window.$ = window.jQuery = require('@/js/assets/jQuery.js');

See the npm package documentation for more information about the usage.

edited Feb 11, 2019 at 10:49

answered Feb 11, 2019 at 10:29

Sebastian

1,77215 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

yevic tabita Over a year ago

Thanks for your help, it doesn't solve the probleme, i totally don't understand why it change nothing using this method...

Sebastian Over a year ago

See my edit on how to assign jQuery to a global variable, that can be used throughout your entire application and not just within your app.js module.

booellean · Accepted Answer · 2019-11-12 19:00:50Z

I had a similar issue with Laravel, Vue, and JQuery. For me, the fix was installing JQuery with npm install jquery, and then editing the webpack.mix.js file to copy it to my public js folders like so...

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
   .copy('node_modules/jquery/dist/jquery.min.js', 'public/js')

app.blade.php

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{csrf_token()}}">
        <title>MTM</title>
        <link href=" {{ asset('css/app.css') }}" rel="stylesheet">
   </head>
   <body>
        <div id="app">
        <app></app>
   </div>
        <script src="{{ asset('js/app.js') }}"></script>
        <script src="{{ asset('/js/jquery.min.js') }}"></script>
   </body>
   </html>

yevic tabita · Accepted Answer · 2019-02-11 10:41:45Z

Using var $ = require('@/js/assets/jQuery.js'); doesn't change anything..

This my full app.js file :

import './bootstrap'
import Vue from 'vue'
import vueResource from 'vue-resource'
import Routes from '@/js/routes.js'
import App from '@/js/views/App'

var $ = require('@/js/assets/jQuery.js');

Vue.config.productionTip = false
Vue.use(vueResource);
Vue.prototype.$env_uri = '';

export const notificationBus = new Vue();
export const deleteModalBus = new Vue();
export const appModalBus = new Vue();
export const loaderBus = new Vue();

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

export default app;

the error a get :

__webpack_require__ http://api.mtm/js/app.js:20 ./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/views/EditFdr.vue?vue&type=script&lang=js& http://api.mtm/js/app.js:2957 __webpack_require__ http://api.mtm/js/app.js:20 ./resources/js/views/EditFdr.vue?vue&type=script&lang=js& http://api.mtm/js/app.js:50191 __webpack_require__ http://api.mtm/js/app.js:20 vue http://api.mtm/js/app.js:50153 __webpack_require__ http://api.mtm/js/app.js:20 js http://api.mtm/js/app.js:49748 __webpack_require__ http://api.mtm/js/app.js:20 js http://api.mtm/js/app.js:43038 __webpack_require__ http://api.mtm/js/app.js:20 0 http://api.mtm/js/app.js:50560 __webpack_require__

rnenciu · Accepted Answer · 2019-02-11 11:01:05Z

0

You may need to specify webpack to load jQuery and there are some ways to do using

inside webpack.config.js

mix.webpackConfig(webpack => {
    return {
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
                Popper: ['popper.js', 'default'],
            })
        ]
    };
});

alongside npm install jquery or yarn add jquery

and in your app.js file add

global.$ = global.jQuery = require('jquery');

edited Feb 11, 2019 at 11:01

answered Feb 11, 2019 at 10:32

rnenciu

3685 silver badges14 bronze badges

1 Comment

yevic tabita Over a year ago

Where do i need to put this ? thanks a lot for helping

Collectives™ on Stack Overflow

Include JS library using vueJS laravel

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related