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

user_2339232 0
Viewed 1256

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!

jquery-confirm laravel vue.js
1 Answers

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:

  1. 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

  1. 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>
user_4878130
Related