Posts tagged "common ui"

Let's go for a simple base modal implementation that provides a backdrop and a centered <div> where we can put any content we need.

Example usage in BaseModalExample.vue:

BaseModalExample.vue

<script setup lang="ts">
import { ref } from 'vue'

import BaseModal from '@/components/modals/BaseModal.vue'

const showModal = ref(false)
</script>

<template>
  <button
    type="button"
    class="bg-indigo-200 px-3 py-1 font-medium"
    @click="showModal = true"
  >
    Show modal
  </button>

  <BaseModal :show="showModal">
    <div class="p-4">
      <div class="text-lg">Hello Modal World!</div>

      <div class="py-2 text-sm">Click to close:</div>

      <button
        type="button"
        class="bg-indigo-200 px-3 py-1 font-medium"
        @click="showModal = false"
      >
        Hide modal
      </button>
    </div>
  </BaseModal>
</template>

Posts tagged common ui

A basic modal component with Vue 3 and Tailwind CSS

Writing stream