Search code examples
vue.jsvuetify.jsjsfiddle

Jsfiddle for debugging does not run with Vuetify

I'm trying to create a JSfiddle so that I can debug a problem with the developer of Vue.Draggable but I cannot get Vuetify to work. I would like to display the v-autocomplete.

What am I missing?

https://jsfiddle.net/legionNL/pqzwy4vt/2/

<div id="app">
  <v-autocomplete v-model="actions" :items="UnitsAndBuildings" 
chips item-value="action" item-text="action" multiple></v-autocomplete>
  <v-chip outlined pill class="ma-2">Default</v-chip>
</div>
Solution

  • First get rid of this:

    components: {
  draggable
},

    draggable isn't defined so that'll nuke the whole thing. I believe the CDN version will be registered globally anyway.

    Second problem is your resources order. Expand the resources section on the left-hand side and reorder them to be in the appropriate order. vue.js should be first.

    Next problem is the old version of Vue. You're pointing at 2.4.2. Update that to 2.6.10.

    Next up, register Vuetify like this:

    new Vue({
  el: "#app",
  vuetify: new Vuetify(),

    Get rid of the Vue.use(Vuetify).

    Finally, you're pointing at an ancient CSS file for Vuetify. Update the version to match the JS.