CODEWITHSUNDEEP
laravelvue.jswebpack
yevic tabita
yevic tabita

Reputation: 59

Include JS library using vueJS laravel

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');

Upvotes: 2

Views: 4847

Answers (4)

booellean
booellean

Reputation: 81

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>

Upvotes: 2

rnenciu
rnenciu

Reputation: 368

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');

Upvotes: 0

Sebastian
Sebastian

Reputation: 1722

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.

Upvotes: 2

yevic tabita
yevic tabita

Reputation: 59

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__

Upvotes: 1

Related Questions