@vueuse/core is a must-have npm package for developers in the Vue.js ecosystem, providing an extensive collection of essential Vue Composition functions. These utilities facilitate seamless migration between both Vue 3 and 2, making it an excellent choice for developers aiming to modernize their Vue applications or build new ones. In addition to being fully tree-shakeable and typed with TypeScript, @vueuse/core is also SSR-friendly, and can be used without a bundler, thanks to its CDN availability. Furthermore, it offers optional add-ons, including integrations with Router, Firebase, RxJS, and more.
To use @vueuse/core in your Vue application, you first need to install the library using npm. Once installed, you may import and utilize its Composition utilities within your Vue components. Here is a simple example:
import { useLocalStorage, useMouse, usePreferredDark } from '@vueuse/core'
export default {
setup() {
// tracks mouse position
const { x, y } = useMouse()
// if user prefers dark theme
const isDark = usePreferredDark()
// persist state in localStorage
const store = useLocalStorage(
'my-storage',
{
name: 'Apple',
color: 'red',
},
)
return { x, y, isDark, store }
},
}
In this example, three utilities from @vueuse/core are imported: useLocalStorage, useMouse, and usePreferredDark. useMouse is used to track the mouse position, usePreferredDark is used to store the user's theme preference, and useLocalStorage is used to store an object in the browser's local storage.
The well-written and comprehensive documentation for @vueuse/core can be found at vueuse.org. It provides detailed explanations on how to use each of the utilities and interactive demos, allowing developers of all levels to understand and utilize the package with ease. You'll also find an updated list of functions and related documentation on this site. Whether you are starting a new Vue project or looking to improve your existing application, consider leveraging @vueuse/core to enhance your development process.
