Integrate other component inside the card in Vue Card component

11 Jun 20245 minutes to read

You can integrate any component inside the card element. Here ListView component is placed inside the card for showcasing the To-Do list.

Composition API (~/src/App.vue)

<template>
  <div id="app">
      <div style="margin: 50px;">
          <!--element which is going to render the Card-->
          <div tabindex="0" class="e-card" id="basic">
              <div class="e-card-title">To-Do List</div>
              <div class="e-card-separator"></div>
              <div class="e-card-content">
                  <div id='element'></div>
              </div>
          </div>
      </div>
  </div>
</template>
<script setup>

import { ListView } from '@syncfusion/ej2-lists';
import { onMounted } from 'vue';

onMounted(() => {

  //Initialize ListView component
  new ListView({
      dataSource: [
          { todoList: 'Pay Bills' },
          { todoList: 'Call Chris' },
          { todoList: 'Meet Andrew' },
          { todoList: 'Visit Manager' },
          { todoList: 'Customer Meeting' },
      ],
      //map the appropriate columns to fields property
      fields: { text: 'todoList' },
  }, "#element");
});
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-vue-layouts/styles/material.css';

#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}
</style>

Options API (~/src/App.vue)

<template>
  <div id="app">
    <div style="margin: 50px;">
      <!--element which is going to render the Card-->
      <div tabindex="0" class="e-card" id="basic">
        <div class="e-card-title">To-Do List</div>
        <div class="e-card-separator"></div>
        <div class="e-card-content">
          <div id='element'></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import { ListView } from '@syncfusion/ej2-lists';

export default {
  name: 'app',
  data() {
    return {};
  }
  , mounted() {

    //Initialize ListView component
    new ListView({
      dataSource: [
        { todoList: 'Pay Bills' },
        { todoList: 'Call Chris' },
        { todoList: 'Meet Andrew' },
        { todoList: 'Visit Manager' },
        { todoList: 'Customer Meeting' },
      ],
      //map the appropriate columns to fields property
      fields: { text: 'todoList' },
    }, "#element");
  }
}

</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-vue-layouts/styles/material.css';

#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}
</style>