Solvedvue slider component Vue initialized twice

Issuehunt badges

Describe the bug

After including slider for use

 import  VueSlider from 'vue-slider-component'; 
 Vue.component('VueSlider', VueSlider);

I see the vue development message twice.

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

The first from my main needed.js where i initialized my vue.
The second is from webapp.js where i included the slider.

When i click on any element after adding this slider i get this error.

[Vue warn]: $attrs is readonly.

From this post on stackoverflow:
The $attrs, $listeners and other warnings are displayed if there's more than one instance of Vue loaded

Is there anything i can do to resolve this?

Vue: 2.6.10
Vue-router: 3.0.3
Vue-slider-component: 3.0.36

There is a $50.00 open bounty on this issue. Add more on Issuehunt.

46 Answers

✔️Accepted Answer

Specific to a Rails app:

Hmmm...I think I just got rid of my duplicate loading error... Added this to my config/webpack/environment.js file:

// see https://stackoverflow.com/questions/53582944/how-to-properly-install-vuetify-for-rails
const resolver = {
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}
environment.config.merge(resolver)

Need to do some more testing to verify, but I thought I'd add this now for anyone using Rails and having the problem.

Other Answers:

@feldsam It has been tested that the slider does not work in versions prior to vue2.6.0 after removing require('vue').

So I updated it by releasing a beta version:

  yarn add vue-slider-component@beta
  # npm install vue-slider-component@beta --save

More Issues: