In laravel 5.5/vue.js appication to use jquery-confirm library

Question

In laravel 5.5/vue.js appication I would like to use jquery-confirm library and for this In my resources/views/layouts/app.blade.php I wrote:

    ...
            @yield('content')
        </div>

        <!-- Scripts -->
        <script src="{{ asset('js/jquery/jquery.min.js') }}"></script>
        <script src="{{ asset('js/funcs.js') }}"></script>
        <script src="{{ asset('js/my_app.js') }}"></script>
        <script src="{{ asset('js/jquery/jquery-confirm.min.js') }}"></script>
        <script src="{{ asset('js/app.js') }}"></script>

</body>
<footer>
</footer>
</html>

But in console I got the error :

Uncaught TypeError: $.confirm is not a function

Was it wrong way of attaching files to the app? Which is the right way?

Thanks!

generally you need to ensure you're including `jquery-confirm` after you've included jquery which afaik is included in `app.js` — apokryfos, Nov 26 '17 at 08:43

apokryfos · Answer 1 · 2017-11-27T12:34:52.440

The way I recommend doing this is:

Install jquery-confirm via NPM, simplest thing to do is to add it in your package.json under dependencies, e.g.:

"dependencies": {
      ...
      "jquery-confirm": "^3.3.2" 
 }

Then require it in your app.js after jquery

require('./bootstrap');
require('jquery-confirm');

The next time your compile the package it should be included in your app.js

If you insist on including it in your source then one of the following would work:

Make sure the file is in your /resources/assets/js folder. Then update your webpack.mix.js to the following:

mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .copy('resources/assets/js/jquery-confirm.min.js', 'public/css/jquery-confirm.min.js');

OR

Make sure the file is in your /public/js folder

By doing either of those you also need to make sure the file is loaded after app.js :

<script src="{{ asset('js/app.js') }}"></script>
<script src="{{ asset('js/jquery/jquery-confirm.min.js') }}"></script>

apokryfos, Thanks for response, that was helpfull! Could you also to figure which is the best way to include jquery-confirm.min.css to the project? — user2339232, Nov 27 '17 at 11:17
I've updated the question. I still thing the NPM route is better though — apokryfos, Nov 27 '17 at 12:35

In laravel 5.5/vue.js appication to use jquery-confirm library

1 Answers1