LARAVEL MIX and VUE

Hi guys, I have hard time with understanding bundling my app using laravel-mix I am hoping that some of you will help me...

question #1

So let's say that I've created laravel 5.4 app and I wan't to use Vue and ES6 in it.

Only one chunk off my app is using Vue let's say I've got two views one is using VUE and another is NOT (pure blade) Routing is via laravel.

In my html

<head></head>

I've added libs like jQuery, Slick, Select2 via CDN.

In the first view I am using Single file components and with with basic laravel-mix configuration everything works just fine.

In second one like I said I am using pure blade/jquery combination but the problem starts when I want to tweak my app and remove all libs loaded via cdns (jquery, select2, slick) and bundle them in separate file AllVendorStuff.js

In my mind I want to have this separate file with all my external .js files Can I do that ?

question #2

I want to export jQuery as global so when I use $ in my Vuecomponent.vue Webpack will know that I want to use jquery. Is it possible or I need to import jquery to my component every time I want to use jQuery?

nadhirboukhenifra

8 years ago

Level 4

you want to separate js files into three:

where your CDN js use this code:

  <script src="{{ mix('/js/manifest.js') }}"></script>
  <script src="{{ mix('/js/vendor.js') }}"></script>
  <script src="{{ mix('/js/app.js') }}"></script>

and in your webpack.mix.js file:

mix.js('resources/assets/js/app.js', 'public/js')
   .extract(['jquery', 'vue','select2','slick'])
   .sourceMaps()
   .version();

and inside your resources/assets/js/bootstrap.js you must include (jquery, select2, slick).

try {
    window.$ = window.jQuery = require('jquery');

    // require('./node_modules/select2/dist/js/select2.min.js');
    // require('./node_modules/slick/index.js');

    require('select2');
    require('slick');


} catch (e) {}

after install them like this:

yarn add jquery Prefer or npm install jquery and the same for other: yarn add select2 and yarn add slick

or using single js file!! like this:

<script src="{{ mix('/js/app.js') }}"></script>

and in webpack.mix.js file:

mix.js([
  './node_modules/jquery/dist/jquery.min.js',
  './node_modules/select2/dist/js/select2.min.js',
  './node_modules/slick/index.js',
  'resources/assets/js/app.js',
],'public/js')
.sourceMaps()
.version();

in bootstrap.js :

try {
    window.$ = window.jQuery = require('jquery');

} catch (e) {}

importing every time in every single component, its BAD IDEA.

alirezabar

8 years ago

Level 1

@nadhirboukhenifra hey, good answer, but if our external js(jquery) files are there in the public folder, how to add them in bootstrap.js ??? it make error when use run dev !?

nadhirboukhenifra

8 years ago

Level 4

@alirezabar , public folder!!!, can send me your webpack.mix.js and bootstrap.js code and the files list in public folder that you want to use.

Please or to participate in this conversation.