9

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.

cngzz1
  • 143
  • 2
  • 9
Lance Whatley
  • 2,395
  • 1
  • 13
  • 16
  • not sure if this applies ... but can you try `is="v-row"`instead `tag=...` ? i think about this: https://vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats – Estradiaz Sep 28 '20 at 11:02
  • 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 Sep 29 '20 at 19:08
  • 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 Sep 29 '20 at 19:20
  • @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 Sep 30 '20 at 00:23
  • @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 Sep 30 '20 at 00:23

2 Answers2

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

Paulo Borges Oliva
  • 211
  • 1
  • 3
0

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' }
  ]
//...
}
Ivan Klochkov
  • 705
  • 4
  • 14
  • 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). – Lance Whatley Sep 29 '20 at 23:35
  • Are there any errors in browser console when you run prod bundle? Like ``Unknown custom element: - did you register the component correctly?`` – Ivan Klochkov Sep 30 '20 at 00:27
  • No browsers errors at all in the console when the DOM renders. – Lance Whatley Sep 30 '20 at 11:33
  • 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. – Ivan Klochkov Sep 30 '20 at 11:49
  • 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. – Lance Whatley Sep 30 '20 at 18:07
  • 1
    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. – Excalibaard Dec 30 '20 at 16:51