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


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

And include this plugin in file bootstrap.js:


Than I use in the application file app.js



// ... code

const app = new Vue({
    components: {
    template: '<app></app>',
    mounted() {

Config for build my project webpack.mix.js:

    .js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/vendors.scss', 'public/css')
    .sass('resources/assets/sass/style.scss', 'public/css')
        '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.$;


Seems like you forgot to update your question with your solution

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 *