@obewds/vue-tw-el

Appearance

On this page

@obewds/vue-tw-el

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

Installation

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

Tailwind CSS Integration

This component is dependent on Tailwind CSS and the @obewds/obewds-tw-config package that drives a lot of the features of this component. So you'll want to be sure you have the most recent version of the @obewds/obewds-tw-config package when getting started and first bringing this compoent into a project.

IS IT INSTALLED???

The @obewds/obewds-tw-config package is installed if you have an obewds.tw.config.json file in your root directory! However, you can also safely run the @obewds/obewds-tw-config package's update command, which will install a fresh default file if one is not found in your project root!

So if it's installed, you'll want to Update Your Config File.

If it's not installed, then you'll want to Install the Config File.

Don't forget, you'll also want to ensure you've:

  • Handled your Tailwind Config Setup for the @obewds/obewds-tw-config package
  • Ensured you've included your new obewds.tw.config.json file into your current app's global context

IN-APP CONTEXTS

Dealing with the obewds.tw.config.json file is detailed in the App Config Setup section of the @obewds/obewds-tw-config package docs.

Importing

Template syntax

html
<template>
    <VueTwEl tag="..."/>
</template>
1
2
3

Script setup syntax

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

Composition API syntax

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

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

Props

bgPalette

✅ Type String
❌ Not Required
❌ Does Not Validate

html
<template>
    <VueTwEl tag="div" bg-palette="default"/>
</template>
1
2
3

bgColor

✅ Type String
❌ Not Required
❌ Does Not Validate

html
<template>
    <VueTwEl tag="div" bg-color="default"/>
</template>
1
2
3

borderPalette

✅ Type String
❌ Not Required
❌ Does Not Validate

html
<template>
    <VueTwEl tag="div" border-palette="default"/>
</template>
1
2
3

borderColor

✅ Type String
❌ Not Required
❌ Does Not Validate

html
<template>
    <VueTwEl tag="div" border-color="default"/>
</template>
1
2
3

tag

Detailed in the @obewds/vue-el docs.


text

Detailed in the @obewds/vue-el docs.


textPalette

✅ Type String
❌ Not Required
❌ Does Not Validate

html
<template>
    <VueTwEl tag="div" text-palette="default"/>
</template>
1
2
3

textColor

✅ Type String
❌ Not Required
❌ Does Not Validate

html
<template>
    <VueTwEl tag="div" text-color="default"/>
</template>
1
2
3

Slots

#default

Detailed in the @obewds/vue-el docs.


Uninstall

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