InfoDialog.vue

<template>
  <q-dialog>
    <q-card style="max-width: 600px;" :style="$q.screen.lt.md ? 'width: 100%;' : 'width: 50%' ">
      <q-card-section class="bg-secondary row items-center justify-between">
        <div class="text-primary text-h6 row items-center">
          <q-icon name="info" size="md" class="q-mr-sm" />
          Informations
        </div>
        <q-btn icon="close" text-color="primary" unelevated round v-close-popup />
      </q-card-section>

      <q-card-section class="q-mx-md q-my-sm">
        <div v-html="content" />
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script setup lang="ts">
defineProps({
  content: String
})
</script>

<style scoped>
</style>