beautiful-vue-use

🚀 Features

📦 Install

Package manager

# npm 
$ npm install beautiful-vue-use --save
$ npm install @beautiful-vue-use/animate --save

# pnpm
$ pnpm add beautiful-vue-use
$ pnpm add @beautiful-vue-use/animate --save

CDN

<script src="https://unpkg.com/beautiful-vue-use"></script>
<script src="https://unpkg.com/@beautiful-vue-use/animate"></script>

🔨 Usage

Manual import:

import { useInterval, useCookie, useCounter } from 'beautiful-vue-use'
import { useInterval, useSpring } from '@beautiful-vue-use/animate'

Auto import:

$ npm i -D unplugin-auto-import

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
	plugins:[
		AutoImport({
			include:[/\.vue$/],
			imports:[
				"beautiful-vue-use",
				{
					'@beautiful-vue-use/animate':[
						'useInterval',
						['useTimeout', 'useDelay']
					]
				},
				{
					from:'@beautiful-vue-use/effect',
					imports:[''],
					type:true
				}
			]
			// ...
		})
	]
})

🦄 Functions

animate

• useInterval
• useRaf
• useSpring
• useTimeout
• useTween

effect

• useCookie
• useCopyToClipboard
• useError
• useFavicon
• useLocalStorage
• usePermission
• useSessionStorage
• useTitle

lifecycle

• useEffectOnce
• useLogger
• usePromise

sensors

• useBattery
• useGeolocation
• useHash
• useIdle
• useLocation
• useMeasure
• useMedia
• useWindowSize

state

• useCounter
• useDefault
• useFirstMountState
• useList
• useMap
• useMethods
• useMultiStateValidator
• usePrevious
• useQueue
• useSet
• useToggle

ui

• useAudio
• useCss
• useDrop
• useDropArea
• useFullscreen
• useSlider
• useVideo

miscellaneous

• useDateFormat

📄 License

MIT License © 2024-PRESENT Yaxing Son