Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
@vueuse/nuxt
Advanced tools
@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.
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>
```
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 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.
This is an add-on of VueUse, which provides better Nuxt integration auto-import capabilities.
npm i @vueuse/nuxt
// nuxt.config
export default defineNuxtConfig({
modules: [
'@vueuse/nuxt',
],
})
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
MIT License © 2021-PRESENT Anthony Fu
FAQs
VueUse Nuxt Module
The npm package @vueuse/nuxt receives a total of 123,750 weekly downloads. As such, @vueuse/nuxt popularity was classified as popular.
We found that @vueuse/nuxt demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.