GridLayoutExample.vue

<template>
  <div>
    <grid-layout
      :layout="item"
      :col-num="12"
      :row-height="20"
      :is-draggable="true"
      :is-resizable="true"
      :is-mirrored="false"
      :vertical-compact="false"
      :responsive="true"
      :use-css-transforms="false"
      :auto-size="false"
    >
      <transition name="slide-fade"> <!-- Transition lors de l'apparition de la tuile-->
        <grid-item
          class="item"
          :minW="6"
          :minH="4"
          :x="item[0].x"
          :y="item[0].y"
          :w="item[0].w"
          :h="item[0].h"
          :i="item[0].i"
          :static="!isLock"
        >
          <div class="tuile-header">Nom de la tuile</div>
          <div class="tuile-body">
            <composant1-contenu-dans-la-tuile/>
          </div>
        </grid-item>
      </transition>
      <transition name="fade">
        <grid-item
          class="item"
          :minW="6"
          :minH="11"
          :x="item[1].x"
          :y="item[1].y"
          :w="item[1].w"
          :h="item[1].h"
          :i="item[1].i"
          :static="!isLock"
        >
          <div class="tuile-body">
            <composant2-contenu-dans-la-tuile/>
          </div>
        </grid-item>
      </transition>
    </grid-layout>
  </div>
</template>

<script>
import { GridLayout, GridItem } from 'vue-grid-layout'

import Composant1ContenuDansLaTuile from '@/components/gridItems/Composant2ContenuDansLaTuileComposant1ContenuDansLaTuile'
import Composant2ContenuDansLaTuile from '@/components/gridItems/Composant2ContenuDansLaTuile'

import { mapActions, mapState } from 'vuex'
export default {
  data() {
    return { idProp: null }
  },
  components: {
    Composant1ContenuDansLaTuile
    Composant2ContenuDansLaTuile
    DetailsTableau,
    GridLayout,
    GridItem
  },
  computed: {
    ...mapState('preferencesStore', ['isLock']),
    item() {
        return [
          { x: 0, y: 0, w: 12, h: 4, i: '0' },
          { x: 0, y: 4, w: 12, h: 24, i: '1' }
        ]
  }
}
<script>
<style lang="css">
.slide-fade-enter-active {
  transition: all 0.6s ease;
}
.slide-fade-leave-active {
  transition: all 0.4s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to{
  transform: translateX(25px);
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 2s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

.item {
  border-radius: 6px;
  box-shadow: 6px 8px 20px 2px #d6d6d6;
  z-index: 1;
}
.tuile-header {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  color: #fff;
  padding: 0px 15px 0px 15px;
  background-color: #06769e;
}
.tuile-body {
  height: 100%;
  overflow-y: auto;
  padding: 15px;
  background-color: #fff3e0;
}
</style>