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

Question

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):

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

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:

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.

Issykkul

not sure if this applies ... but can you try is="v-row"instead tag=... ? i think about this: vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats – Pilau

Please provide some info on how you register and import the v-row component. It's obviously an issue caused by tree shaking. – Jehol

There is also may be a problem with VueDraggable registration. And take a look at your resulting bundle contents. Use either webpack-analyser or just plain text search (Draggable/sortablejs etc.) – Jehol

@IvanKlochkov v-row is provided by vuetify. Also, I ran webpack-analyzer by adding analyzer: true to my nuxt.config.js and I see both sortable.complete.esm.js and vuedraggable.common.js in the vendor bundle. – Issykkul

@Pilau I tried your suggestion and doing that breaks the draggable functionality (i.e. it's almost like it completely ignores that the original tag is draggable) – Issykkul

Answer 1

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

Harlene

Answer 2

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' }
  ]
//...
}

Jehol

Apologies for not providing the context in my original post, but I register the vuedraggable component example how you have above already (i.e. in a draggable.js plugin and add it to my nuxt.config.js). – Issykkul

Are there any errors in browser console when you run prod bundle? Like Unknown custom element: - did you register the component correctly? – Jehol

No browsers errors at all in the console when the DOM renders. – Issykkul

It may be a dumb workaround - but it should make it work. Try to directly import component like import {VRow} from 'vuetify/lib'; and add VRow to your components:{VRow,someOther} There is an obvious issue with incorrect imports or invalid plugint registration so it is shaken off during production build. – Jehol

I'm using draggable and v-row elsewhere in the app separate from each other without issues, so it seems like an incorrect assumption that tree shaking is the issue since both components work without each other fine, but only break when trying to work with each other. – Issykkul

No errors in production might be due to your vue.config.productionTips setting. I tried manually importing, as suggested by Ivan and vuetify for dynamic resolution, but with no effect sadly. v-row isn't recognized or converted, specifically and only when used in the vue.draggable component's tag option. Perhaps this should be mentioned on their github issues page. – Shifra