Vue-Bubble-UI 🔮

A highly configurable Bubble UI Vue.js component, similar to the iconic Apple Watch app layout.

Originally known as React-Bubble-UI, this package is re-created for Vue.js.

Prerequisites

• node >=18

Install

Using npm:

npm i vue-bubble-ui

Using yarn:

yarn add vue-bubble-ui

Interactive Demo

Interact with a live demo to configure to UI to your liking.

Experience Demo

Thorough Documentation

Understand how to apply the component's high confirgurability to your design.

Read Docs

How to use for Vue.js

<script setup lang="ts">
import { BubbleUi, type BubbleUiProps } from 'vue-bubble-ui'
// write your code
</script>

<template>
  <div :style="{ width: '100vw', height: '100vh' }">
    <bubble-ui :items="data" :options="options">
      <template #item="{ item, bubble }"> write your bubble code here </template>
    </bubble-ui>
  </div>
</template>

Please see src/App.vue for the detail.

Each element in the items of props can be access from item. The position and size of each element can be got from bubble with the type below.

{
  bubbleSize: number
  translateX: number
  translateY: number
  distance: number
}

Author

This package was re-created for Vue.js by Junichi Kaneda in 2024.

• Twitter: @kanejun-x
• Github: @kanejun-x

Original React package was created by Blake Sanie in 2020.

• Like what you see? View his other projects 📱 , read his blog 💻 , or buy him a coffee ☕.

🤝 Contributing

Contributions, issues and feature requests are welcome! Feel free to check issues page.

I highly encourage you to help improve this package further through the following steps:

1. Clone this repository
2. Branch off for the new feature
3. Contribute the feature (write the code)
4. Push to origin repository
5. Create a Pull Request

This package assumes you are using Conventional Commit messages.

Show your support

Give a ⭐️ if this project helped you!

📝 License

MIT © blakesanie

---

This README was generated with ❤️ by readme-md-generator