<template>
  <component
    :is="tag"
    :class="style[baseClass]"
  >
    <slot />
  </component>
</template>
<script>

import { defineComponent, useCssModule } from 'vue';

export default defineComponent({
  name: 'CdrCard',
  props: {
    tag: {
      type: String,
      default: 'article',
    },
  },
  setup() {
    return {
      style: useCssModule(),
      baseClass: 'cdr-card',
    };
  },
});
</script>

<style lang="scss" module src="./styles/CdrCard.module.scss">
</style>

<script setup>
import { useCssModule, defineProps } from 'vue';

const props = defineProps({
    tag: {
      type: String,
      default: 'article',
    }
})

const baseClass = 'cdr-card';
const style = useCssModule();
</script>

<template>
  <component
    :is="tag"
    :class="style[baseClass]"
  >
    <slot />
  </component>
</template>

<style lang="scss" module src="./styles/CdrCard.module.scss">
</style>

Refactor cdr-card to use <script setup> syntax
Refactor cdr-card to use <script setup> syntax
