What is @vueuse/nuxt?
@vueuse/nuxt is a Nuxt.js module that integrates VueUse, a collection of essential Vue Composition Utilities for Vue 2 and 3. It provides a wide range of reactive utilities and composable functions to enhance your Vue.js development experience.
What are @vueuse/nuxt's main functionalities?
State Management
This feature allows you to easily manage state with localStorage. The `useLocalStorage` function synchronizes a reactive variable with localStorage, making it persistent across page reloads.
```javascript
<script setup>
import { useLocalStorage } from '@vueuse/core'
const name = useLocalStorage('name', 'John Doe')
</script>
<template>
<input v-model="name" placeholder="Enter your name" />
<p>Your name is: {{ name }}</p>
</template>
```
Sensors
This feature provides reactive utilities for various sensors. The `useMouse` function, for example, tracks the mouse position and makes it reactive, allowing you to easily use it in your templates.
```javascript
<script setup>
import { useMouse } from '@vueuse/core'
const { x, y } = useMouse()
</script>
<template>
<p>Mouse position: ({{ x }}, {{ y }})</p>
</template>
```
Network
This feature provides utilities to reactively track network status. The `useOnline` function, for example, allows you to determine if the user is online or offline and react accordingly in your templates.
```javascript
<script setup>
import { useOnline } from '@vueuse/core'
const isOnline = useOnline()
</script>
<template>
<p v-if="isOnline">You are online</p>
<p v-else>You are offline</p>
</template>
```
Other packages similar to @vueuse/nuxt
vue-composition-api
The `vue-composition-api` package provides a way to use the Vue 3 Composition API in Vue 2 projects. While it offers similar reactive utilities, it does not come with the extensive collection of composable functions that @vueuse/nuxt provides.
pinia
Pinia is a state management library for Vue that offers a simpler and more intuitive API compared to Vuex. While it focuses on state management, it does not provide the wide range of reactive utilities that @vueuse/nuxt offers.
@vueuse/nuxt
![NPM version](https://img.shields.io/npm/v/@vueuse/nuxt?color=a1b858)
This is an add-on of VueUse, which provides better Nuxt integration auto-import capabilities.
Install
npm i @vueuse/nuxt
export default defineNuxtConfig({
modules: [
'@vueuse/nuxt',
],
})
Caveats
The following utils are disabled from auto-import for Nuxt to avoid conflicts with Nuxt's built-in utils:
toRefs
useFetch
useCookie
useHead
useTitle
useStorage
You can always use them by explicitly import from @vueuse/core
License
MIT License © 2021-PRESENT Anthony Fu