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

8
votes

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.

2
vue.jsnuxt.jsvuetify.jsdraggablevuedraggable
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 – Estradiaz
Please provide some info on how you register and import the v-row component. It's obviously an issue caused by tree shaking. – Ivan Klochkov
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.) – Ivan Klochkov
@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. – Lance Whatley
@Estradiaz 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) – Lance Whatley

2 Answers

1
votes

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

0
votes

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