vue3-baseblock

Reusable Vue 3 VueBaseBlock component with fullscreen and collapsible content.

Install

npm install vue3-baseblock

yarn add vue3-baseblock

Usage

<script setup lang="ts">
import VueBaseBlock from "vue3-baseblock";
import "vue3-baseblock/style.css";
</script>

<template>
  <VueBaseBlock title="Example" bordered rounded>
    <p>Hello from VueBaseBlock.</p>
  </VueBaseBlock>
</template>

Props

• title (string, default: "")
• titleClass (string, default: "")
• subtitle (string, default: "")
• subTitleClass (string, default: "")
• bordered (boolean, default: false)
• rounded (boolean, default: true)
• transparent (boolean, default: false)
• fxPop (boolean, default: false)
• fxRotateRight (boolean, default: false)
• fxRotateLeft (boolean, default: false)
• headerClass (string, default: "")
• optionsClass (string, default: "")
• contentClass (string, default: "")
• footerClass (string, default: "")
• rootClass (string, default: "")
• headerTitleClass (string, default: "")
• noFooter (boolean, default: false)
• headerRtl (boolean, default: false)
• modeLoading (boolean, default: false)
• modeFullscreen (boolean, default: false)
• modeContentHide (boolean, default: false)
• modeClose (boolean, default: false)
• btnOptionFullscreen (boolean, default: false)
• btnOptionFullscreenIconClass (string, default: "")
• btnOptionContent (boolean, default: false)
• btnOptionClose (boolean, default: false)
• blockId (string, default: "@")
• headerUppercase (boolean, default: false)
• cursorClass (string, default: "default")
• showSearcher (boolean, default: false)

Events

• content-hide
• content-show
• full-screen
• normal-screen
• close (payload: blockId)
• header-clicked

Slots

• default
• header
• title
• subtitle
• options
• custom
• content
• footer
• searcher

Exposed methods

Call via template ref.

• fullscreenToggle()
• fullscreenOn()
• fullscreenOff()
• contentToggle()
• contentShow()
• contentHide()
• statusToggle()
• statusLoading()
• statusNormal()
• open()
• close()

Styling

All internal classes are prefixed with __ so they can be overridden easily. The component ships with its own CSS file.

import "vue3-baseblock/style.css";

VueBaseBlock defaults to full width (width: 100%). Override with a custom class if needed.

Default backgrounds use low-specificity rules, so setting background on your custom class (e.g., rootClass or headerClass) will override without !important.

Internal class hooks

Use these classes to override styles from your app CSS:

• __block
• __block-bordered
• __block-rounded
• __block-transparent
• __block-fx-pop
• __block-fx-rotate-right
• __block-fx-rotate-left
• __block-mode-loading
• __block-mode-fullscreen
• __block-mode-hidden
• __block-header
• __block-header-default
• __block-header-rtl
• __block-title
• __block-title-uppercase
• __block-options
• __btn-block-option
• __btn-muted
• __icon
• __icon-close
• __icon-fullscreen
• __icon-fullscreen-exit
• __icon-chevron
• __icon-chevron-up
• __icon-chevron-down
• __block-body
• __block-body-hidden
• __block-content
• __block-content-sm
• __block-content-full
• __block-footer
• __block-footer-hidden
• __content-custom
• __block-loading
• __block-spinner
• __space-x-1