Nuxt + Vuetify + VueDraggable - draggable tag prop, v-row, works in dev server but not after building/running for production

user_7857707 0
Viewed 2297

I'm building a Nuxt app with Vuetify buildModule setup and want to make a number of v-cols sortable via VueDraggable (in my case, I built and added a super small Nuxt plugin which binds a global draggable component from the default export from VueDraggable). The v-cols should be wrapped with a v-row, so I'm using the draggable component with tag="v-row". This works well when running the dev server (nuxt-ts in my case since I'm using Nuxt with typescript support), but fails when building and running in production mode.

To illustrate the issue, here is some info on what's happening. My source is as follows (i.e. I use Pug):

enter image description here

In development mode, my v-row is rendered correctly in the DOM from Vuetify:

enter image description here

But when building and running in production mode, the draggable component literally renders v-row as the DOM tag instead of it going through rendering/parsing via Vuetify:

enter image description here

Does anyone have any idea on how to identify the root cause and how to resolve it here? I can likely hack my way around this problem for now, but want to know if this is a Nuxt bug or if anyone has solved this in any other way.

vuedraggable nuxt.js vuetify.js vue.js draggable
2 Answers

Just came across this issue, it turns out you need to register the VRow component globally:

import { VRow } from 'vuetify/lib';

Vue.component("v-row", VRow)

in your main.js

user_26817370

If the problem is caused by the vueDraggble registration try following:

Create <project-root>/plugins/draggable.ts

import draggable from 'vuedraggable';
import Vue from 'vue';
Vue.component('draggable', Draggable);

And remove

import draggable from 'vuedraggable'

from your .vue files.

and in your nuxt.config.js add

export default {
// ...
  plugins: [
    { src: '~/plugins/draggable.ts', mode: 'client' }
  ]
//...
}
user_26435290
Related