---
name: composables-in-stores
description: Using Vue composables within Pinia stores
---

# Composables in Stores

Pinia stores can leverage Vue composables for reusable stateful logic.

## Option Stores

Call composables inside the `state` property, but only those returning writable refs:

```ts
import { defineStore } from 'pinia'
import { useLocalStorage } from '@vueuse/core'

export const useAuthStore = defineStore('auth', {
  state: () => ({
    user: useLocalStorage('pinia/auth/login', 'bob'),
  }),
})
```

**Works:** Composables returning `ref()`:
- `useLocalStorage`
- `useAsyncState`

**Doesn't work in Option Stores:**
- Composables exposing functions
- Composables exposing readonly data

## Setup Stores

More flexible - can use almost any composable:

```ts
import { defineStore } from 'pinia'
import { useMediaControls } from '@vueuse/core'
import { ref } from 'vue'

export const useVideoPlayer = defineStore('video', () => {
  const videoElement = ref<HTMLVideoElement>()
  const src = ref('/data/video.mp4')
  const { playing, volume, currentTime, togglePictureInPicture } =
    useMediaControls(videoElement, { src })

  function loadVideo(element: HTMLVideoElement, newSrc: string) {
    videoElement.value = element
    src.value = newSrc
  }

  return {
    src,
    playing,
    volume,
    currentTime,
    loadVideo,
    togglePictureInPicture,
  }
})
```

**Note:** Don't return non-serializable DOM refs like `videoElement` - they're internal implementation details.

## SSR Considerations

### Option Stores with hydrate()

Define a `hydrate()` function to handle client-side hydration:

```ts
import { defineStore } from 'pinia'
import { useLocalStorage } from '@vueuse/core'

export const useAuthStore = defineStore('auth', {
  state: () => ({
    user: useLocalStorage('pinia/auth/login', 'bob'),
  }),

  hydrate(state, initialState) {
    // Ignore server state, read from browser
    state.user = useLocalStorage('pinia/auth/login', 'bob')
  },
})
```

### Setup Stores with skipHydrate()

Mark state that shouldn't hydrate from server:

```ts
import { defineStore, skipHydrate } from 'pinia'
import { useEyeDropper, useLocalStorage } from '@vueuse/core'

export const useColorStore = defineStore('colors', () => {
  const { isSupported, open, sRGBHex } = useEyeDropper()
  const lastColor = useLocalStorage('lastColor', sRGBHex)

  return {
    // Skip hydration for client-only state
    lastColor: skipHydrate(lastColor),
    open,       // Function - no hydration needed
    isSupported, // Boolean - not reactive
  }
})
```

`skipHydrate()` only applies to state properties (refs), not functions or non-reactive values.

<!--
Source references:
- https://pinia.vuejs.org/cookbook/composables.html
-->