@obewds/vue-tw-block

Appearance

On this page

@obewds/vue-tw-block

Welcome to the docs page for OBE:WDS's VueTwBlock.vue component for Vue.js!

Installation

bash
npm install @obewds/vue-tw-block --save-dev
1

Tailwind CSS Integration

Inherited from and prefaced in the @obewds/vue-tw-el docs.

Detailed in the @obewds/obewds-tw-config docs.


Importing

Template syntax

html
<template>
    <VueTwBlock/>
</template>
1
2
3

Script setup syntax

html
<script setup lang="ts">
    import { VueTwBlock } from '@obewds/vue-tw-block'
</script>
1
2
3

Composition API syntax

html
<script lang="ts">
    import { defineComponent } from 'vue'
    import { VueTwBlock } from '@obewds/vue-tw-block'

    export default defineComponent({
        components: { VueTwBlock }
    })
</script>
1
2
3
4
5
6
7
8

Props

bgPalette

Detailed in the @obewds/vue-tw-el docs.


bgColor

Detailed in the @obewds/vue-tw-el docs.


borderPalette

Detailed in the @obewds/vue-tw-el docs.


borderColor

Detailed in the @obewds/vue-tw-el docs.


tag

✅ Type String
✅ Required
✅ Validates

html
<template>
    <VueTwBlock tag="div"/>
</template>
1
2
3

The majority of HTML block level tags passed into the tag prop are valid. However, the component does exclude all of the HTML Empty Elements to avoid invalid closing tags generated by Vue's <component is=""> output, as well as excluding each of the following elements due to runtime issues/errors: body, head, html, noscript, script, slot and template elements are also excluded and won't validate!


text

Detailed in the @obewds/vue-el docs.


textPalette

Detailed in the @obewds/vue-tw-el docs.


textColor

Detailed in the @obewds/vue-tw-el docs.


Slots

#default

Detailed in the @obewds/vue-el docs.


Uninstall

bash
npm uninstall @obewds/vue-tw-block
1