@obewds/vue-el

Appearance

On this page

@obewds/vue-el

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

Installation

bash
npm install @obewds/vue-el --save-dev
1

Importing

Template syntax

html
<template>

    <!-- One-Liner span element using the text string prop -->
    <VueEl tag="span" text="Text prop string content"/>

    <!-- Div element using the slot -->
    <VueEl tag="div">
        Compnent slot content
    </VueEl>

</template>
1
2
3
4
5
6
7
8
9
10
11

Script setup syntax

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

Composition API syntax

html
<script lang="ts">
    import { defineComponent } from 'vue'
    import { VueEl } from '@obewds/vue-el'

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

Props

tag

✅ - Type String
✅ - Required
✅ - Validates

html
<template>
    <VueEl tag="span" text="My VueEl span tag"/>
</template>
1
2
3

Outputs:

html
<span>My VueEl span tag</span>
1

The majority of HTML 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!

Another example:

html
<template>
    <VueEl tag="div" text="My VueEl div tag"/>
</template>
1
2
3

Outputs:

html
<div>My VueEl div tag</div>
1

text

✅ - Type String
❌ - Not Required
❌ - Doesn't Validate

html
<template>
    <VueEl tag="div" text="My text prop string"/>
</template>
1
2
3

Outputs:

html
<div>My text prop string</div>
1

WARNING

If both the text prop and slot content are used, then the text prop takes precidence and the slot content will NOT render!

Slots

#default

html
<template>
    <VueEl tag="div">
        My slot content
    </VueEl>
</template>
1
2
3
4
5

Outputs:

html
<div>My slot content</div>
1

DANGER

If both the text prop and slot content are used, then the text prop takes precidence and the slot content will NOT render!


Text Prop vs #default Slot Precidence

html
<template>

    <!--
    The text="" attr/prop value takes precidence 
    over slot content!
    -->
    <VueEl tag="div" text="This text prop value will override">
        This slot content.
    </VueEl>

</template>
1
2
3
4
5
6
7
8
9
10
11

Outputs:

html
<div>This text prop value will override</div>
1

Empty State #default Slot Placeholder

html
<template>

    <!-- 
    Empty slot and text prop/attr values 
    will render the default component 
    slot placeholder string "VueEl"!
    -->
    <VueEl tag="div" text="">
        <!-- This comment won't render -->
    </VueEl>

</template>
1
2
3
4
5
6
7
8
9
10
11
12

Outputs:

html
<!-- The placeholder will still render, though -->
<div>VueEl</div>
1
2

Uninstall

bash
npm uninstall @obewds/vue-el
1