CODEWITHSUNDEEP
laravelvue.jsmaterialize
Felipe Castillo
Felipe Castillo

Reputation: 567

how to use external scripts in vue js and laravel

is the first time I use vue js and laravel mix and I'm a bit confused, I previously loaded the scripts manually, without compiling, however now that I want to use vue js, when I add the app.js script to the end of my blade template the others scripts stop working, I tried to compile all the scripts and add them together with the app.js file but even so it does not work, this is my webpack code

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');
//project files
mix.styles([
    'public/css/materialize.css',
    'public/plugins/datatablesMaterialize.css',
    'public/css/main.css',
    'public/css/ionicons.min.css',
    'public/css/nouislider.css',
    'public/plugins/fullcalendar/fullcalendar.css',
    'public/plugins/responsive.dataTables.min.css',
    'public/css/jquery.fancybox.min.css',
    'public/css/style.css',
    'public/css/sweetalert2.min.css',
    'public/css/jquery.steps.css'
], 'public/css/allPets.css');

mix.scripts([
    'public/plugins/datatablesMaterialize.js',
    'public/plugins/moment.min.js',
    'public/plugins/dataTables.responsive.min.js',
    'public/plugins/moment.min.js',
    'public/plugins/fullcalendar/fullcalendar.js',
    'public/plugins/fullcalendar/lang/es.js',
    'public/plugins/jquery.validate.js',
    'public/plugins/validation-additional-methods.min.js',
    'public/js/materialize.js',
    'public/js/sweetalert2.min.js',
    'public/js/jquery.steps.js',
    'public/plugins/jquery.validate.js',
    'public/plugins/slick/slick.min.js',
    'public/js/jquery.fancybox.min.js',
    'public/js/spinner.js',
    'public/js/jquery.spin.js',
    'public/js/funciones.js'
], 'public/js/allPets.js');

when I use the files allPets.css and allPets.js without the script app.js everything works, however when I add everything it stops working again( the sidebars of materialize stop working etc).

Upvotes: 0

Views: 824

Answers (1)

Pianistprogrammer
Pianistprogrammer

Reputation: 637

var plugin =  'resources/assets/plugins/';

mix.js('resources/assets/js/app.js', 'public/js/app.js')
.combine([
  plugin + 'jquery/jquery.min.js',
  plugin + 'popper/popper.min.js',
  plugin + 'bootstrap/bootstrap.min.js',
  plugin + 'moment/moment.min.js',
  plugin + 'toastr/toastr.min.js',
  plugin + 'slimscroll/jquery.slimscroll.js',
  plugin + 'waves/waves.js',
  plugin + 'sticky-kit/sticky-kit.min.js',
  plugin + 'fancybox/jquery.fancybox.pack.js',
  plugin + 'fancybox/jquery.fancybox.js',
  plugin + 'fancybox/jquery.mousewheel.pack.js',
   'public/js/app.js',
],'public/js/bundle.min.js')
.sass('resources/assets/sass/style.scss', 'public/css')
.browserSync('laravue');

Upvotes: 0

Related Questions