https://github.com/shunnnet/vue-use-x
⚒️ An unofficial Vue 3 reusable utilities
https://github.com/shunnnet/vue-use-x
composable modal vue3
Last synced: 5 months ago
JSON representation
⚒️ An unofficial Vue 3 reusable utilities
- Host: GitHub
- URL: https://github.com/shunnnet/vue-use-x
- Owner: shunnNet
- License: mit
- Created: 2024-11-21T14:09:51.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-08-21T15:00:45.000Z (11 months ago)
- Last Synced: 2025-10-11T02:32:13.422Z (9 months ago)
- Topics: composable, modal, vue3
- Language: TypeScript
- Homepage: https://vue-use-x.netlify.app/
- Size: 189 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# 🛠️ vue-use-x
`vue-use-x` is an unofficial, reusable Vue 3 utility library, which includes many personal preferences.
## Features
- 📝 **Type Safe**: Written in TypeScript with complete type annotations and JSDoc documentation.
- 🪟 **Modal Management**: Effortless management of modal states.
- 🛠️ **Common Utilities**: Provide frequently used functionalities.
## Documetation
Check the [documentation](https://vue-use-x.netlify.app)
## Intro
If [`vueuse`](https://vueuse.org) is like an officially certified supermarket, then `vue-use-x` is more like a small, handcrafted boutique run by an individual. While it doesn’t have everything, you might just find tools that could be helpful.
Unlike `vueuse`, `vue-use-x` is divided into several modules based on functionality, such as `modal`, `query`, and more. These modules are designed to address specific development scenarios and aim to reduce development pain points. However, it also includes modules with small yet general-purpose features, like `common`.
(In reality, I was just too lazy to create a separate repository for each module, so I decided to bundle them all together.)
## Installation
`vue-use-x` is divided into several modules based on different functionalities. If you need to use the features of a specific module, you currently need to install them individually.
```sh
# if you need `modal` package
npm i @vue-use-x/modal
# if you need `common` package
npm i @vue-use-x/common
```
Then, you can import them and use them.
```vue
import { useModal } from "@vue-use-x/modal"
import { useContext } from "@vue-use-x/common"
const modal = useModal()
modal.open({ message: "Hello vue-use-x" })
const ctx = useContext()
ctx.provide({ name: "vue-use-x context" })
```
## Module Introduction
[`@vue-use-x/modal`](https://vue-use-x.netlify.app/modal/use-modal): Provides a composable to toggle modals and pass data. It can be used alongside UI library modals/dialogs. When you need to manage the modal visibility state and pass data multiple times, `useModal` can fully showcase its value.
[`@vue-use-x/common`](https://vue-use-x.netlify.app/common): Provides general-purpose composables to simplify repetitive tasks during development, such as toggling loading states or using `provide`/`inject`, etc.
More modules will be added in the future.
## License
MIT