@vueuse/nuxt

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.

README

@vueuse/nuxt

This is an add-on of VueUse, which provides better Nuxt integration auto-import capabilities.

Install

Install the vueuse module into your application using nuxi:

npx nuxi@latest module add vueuse

Or use npm:

npm i @vueuse/nuxt @vueuse/core

// nuxt.config
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:

• toRef
• toRefs
• toValue
• useFetch
• useCookie
• useHead
• useTitle
• useStorage
• useImage

You can always use them by explicitly import from @vueuse/core

License

MIT License © 2021-PRESENT Anthony Fu