jquery-nice-select with vue.js is not a function

Total
1
Shares

I use this library: https://github.com/hernansartorio/jquery-nice-select

And include this plugin in file bootstrap.js:

require('jquery-nice-select');

Than I use in the application file app.js

app.js:

require('./bootstrap');

// ... code

const app = new Vue({
    router,
    components: {
      App
    },
    template: '<app></app>',
    mounted() {
        $(document).find('select').niceSelect();
    }
}).$mount('#app');

Config for build my project webpack.mix.js:

mix
    .js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/vendors.scss', 'public/css')
    .sass('resources/assets/sass/style.scss', 'public/css')
    .extract(
        [
            'vue',
            'vue-resource',
            'vue-router',
            'vue-scrollto',
            'vue-meta'
        ],
        'public/js/vue.js'
    )
    .extract(
        [
            'jquery',
            'bootstrap-sass',
            'jquery-nice-select',
            'owl.carousel',
            'jquery-parallax.js',
        ],
        'public/js/vendor.js'
    )
    .autoload({
        'jquery': ['$', 'jquery', 'jQuery', 'window.jQuery'],
        'tether': ['window.Tether', 'Tether'],
    })
;

However, when you try to use the niceSelect plugin, the following error occurs:

vue.js:484 [Vue warn]: Error in mounted hook: “TypeError:
$(…).niceSelect is not a function”

and this:

TypeError: $(…).niceSelect is not a function

I do not understand where to look and what I’m doing is not right? At me such problem has arisen only with the given plug-in, earlier all always was connected and worked correctly.

P.S. Note, the error is not that the function is not declared, but that it is not a function. And yes the connection of all JS in the public is done normally:

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

UPD: By the way, the same error appears in directives.

export default {
    directives: {
        niceSelect: {
            update(el) {
                const $  = window.$;
                $(el).niceSelect();
            }
        }
    }
}

Solution

Seems like you forgot to update your question with your solution
https://github.com/hernansartorio/jquery-nice-select/issues/60

From myself I can say that I had same error niceSelect is not a function (with Yii2 Framework, but it is not necessary), the reason was that jQuery was included twice, resulting page source (in browser) was like this:

  • css
  • jquery.js
  • nice-select.js
  • niceSelect initialization function
  • main document content
  • another jquery.js

I just modified code to make last item gone, and it works.

So I advise to review page’s resulting source code (in browser)

Leave a Reply

Your email address will not be published. Required fields are marked *