🚀 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