Vue 3 UI components

Install

Components

Avatar

Avatars are circular components that usually wrap an image or icon. They can be used to represent a person or an object.

Display an image that represents a person or an object, or displays the name initials as fallback. If wrapped in an avatar-group element, avatars are overlapped.

<Avatar :src="user.avatar" :initials="user.name" />

Props

| prop | type | default | description | |---|---|---|---| | src | string, null | undefined | Image url | | initials | string | undefined | Name from where extract fallback initials |

Events

None

Slots

None

CSS custom properties

--avatar-size: 2rem
--avatar-radius: 15%

Button

<Button primary @click="doSomething">Do it!</Button>

Props

| prop | type | default | description | |---|---|---|---| | primary | boolean | undefined | | | alert | boolean | undefined | | | outline | boolean | undefined | | | flat | boolean | undefined | | | block | boolean | undefined | | | loading | boolean | undefined | | | disabled | boolean | undefined | | | submit | boolean | undefined | | | reset | boolean | undefined | |

Events

None

Slots

default

CSS custom properties

--button-padding: 0.5rem
--button-margin: 1px
--button-border-radius: 4px
--button-color: #f8f8f8
--button-font-color: #606068
--button-border: 1px solid #c8c8cf

Collapser

<Collapser>
  <template #title>Title</template>
  <section>Content</section>
</Collapser>

Props

| prop | type | default | description | |---|---|---|---| | disabled | boolean | undefined | | | open | boolean | undefined | |

Events

toggle

Slots

title Title

default Content

CSS custom properties

--collapser-padding: 0.75rem
--collapser-border: 1px solid #0001