환경

nuxt :2.13.3
vue.js : 2.6.11
Vuetify : 2.3.4
Vue.Draggable : 2.24.0

nuxt 모드
▸ Rendering: server-side
▸ Target: server

실현하고 싶은 것

Vuetify의 v-card 구성 요소를 VueDraggable로 정렬하고 싶었습니다.

부딪히는 문제

이 구성 요소

<template>
  <v-layout>
    <v-container>
      <draggable tag="v-row">
        <v-col v-for="i in 10" :key="i" cols="3" class="ma-0">
          <v-card>
            <v-card-title>
              {{ i }}
            </v-card-title>
          </v-card>
        </v-col>
      </draggable>
    </v-container>
  </v-layout>
</template>
<script>
import draggable from 'vuedraggable'
export default {
  components: {
    draggable
  }
}
</script>

yarn dev

하고 표시할 때
(이후 개발 모드)

yarn build
yarn start

하고 표시했을 때(이후 빌드 모드)



그리고로 표시가 다르다.

자세히 알아보기

Chrome의 DevTools 요소를 살펴보면

[개발 모드]


[빌드 모드]


개발 모드에서는 v-row 컴포넌트가 <div class="row">빌드 모드에서는 단지 v-row 태그가 되어 있다

VueDraggable tag Props란 무엇인가?

tag에 컴퍼넌트나 HTML 태그를 지정하는 것으로 <draggable> 를 그 태그나 컴퍼넌트로 치환해 주는 것
표준에서는 <div>tag="v-row" 그렇다면 Vuetify의 v-row 구성 요소를 지정했지만 빌드 모드에서는 왜 반영되지 않습니다.
참고

htps : // 기주 b. 이 m/그 r타 bぇJS/ゔ에. D 라가 b ぇ

나름대로의 해결책

표시하고 싶은 html은 <div class"row"> 그래서<draggable tag="v-row"> 을 <draggable class="v-row">로 변경했습니다.
이것에 의해 개발 모드와 같은 표시로 할 수 있었다.

이 해결책은 너무 힘들다. 뭔가 다른 좋은 방법이 개미 같아…