JQuery Plugins in VUE with Laravel Mix

0
votes

In my webpack.mix.js I have something like this:

// vue components
mix.js('resources/assets/js/app.js', 'public/js');

// scripts which I need
mix.scripts([
    'resources/assets/js/jquery-2.2.4.min.js',
    'resources/assets/js/bootstrap.min.js',
    'resources/assets/js/fastclick.js',
    'resources/assets/js/toastr.min.js',
    'resources/assets/js/select2.min.js',
    ...
], 'public/assets/js/scripts.js');

// styles which I need
mix.styles([
    "resources/assets/css/bootstrap-colorpicker.min.css",
    "resources/assets/css/bootstrap-select.min.css",
    "resources/assets/css/bootstrap.min.css",
    "resources/assets/css/select2.min.css",
    ...
], 'public/assets/css/styles.css');

And I can initialize, for example, a select2 outside my vue components.

But when I trying to use this plugin (or any script of my mix.scripts block) I get the next error:

$(...).select2 is not a function

Okey, I search a little and I found a "solution", before the export default{} of my vue component I need to require the select2 script:

 ...

import Vue from 'vue';

require('../select2.min.js');

export default{

...

And now it works inside and outside of my vue component: BUT I "import" my select2 plugin twice:

  1. Inside my public/assets/js/scripts.js (which I need, because I use select2 and other plugins without a vue component)
  2. And inside my resources/assets/js/app.js (when I run npm run watch or npm run production the compiler adds the requirement of my vue component to this script file)

So, my question is: How can I make my components in VUE use the JQuery scripts coming from my public/assets/js/scripts.js file instead of having to require each of them within each vue component?

I hope there is a way to do that

1
jqueryvuejs2laravel-5.4vue-componentlaravel-mix

1 Answers

0
votes

As I know, the default webpack.config.js of Laravel mix include JQuery. So I commented the next line (271) from webpack.config.js:

/*
new webpack.ProvidePlugin(Mix.autoload || {
    jQuery: 'jquery',
    $: 'jquery',
    jquery: 'jquery'
}),
*/

And now when I show the content of JQuery console.info($()); I see all the plugins.

But I think this its a bit dirty.

There is any official way to do that?