From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Fri, 5 Jan 2024 13:56:51 +0000 (+0100)
Subject: docs: extra note
X-Git-Tag: @pinia/nuxt@0.5.2-beta.0~64
X-Git-Url: http://git.ipfire.org/gitweb/gitweb.cgi?a=commitdiff_plain;h=684a777b4c2625917b3d15114b6df6814aeca0b1;p=thirdparty%2Fvuejs%2Fpinia.git

docs: extra note

See https://github.com/vuejs/pinia/discussions/2402#discussioncomment-8022368
---

diff --git a/packages/docs/cookbook/composables.md b/packages/docs/cookbook/composables.md
index 2a9649ae..45cb717b 100644
--- a/packages/docs/cookbook/composables.md
+++ b/packages/docs/cookbook/composables.md
@@ -34,7 +34,7 @@ import { defineStore, skipHydrate } from 'pinia'
 import { useMediaControls } from '@vueuse/core'
 
 export const useVideoPlayer = defineStore('video', () => {
-  // we won't expose this element directly
+  // we won't expose (return) this element directly
   const videoElement = ref<HTMLVideoElement>()
   const src = ref('/data/video.mp4')
   const { playing, volume, currentTime, togglePictureInPicture } =
@@ -57,6 +57,10 @@ export const useVideoPlayer = defineStore('video', () => {
 })
 ```
 
+:::warning
+Differently from regular state, `ref<HTMLVideoElement>()` contains a non-serializable reference to the DOM element. This is why we don't return it directly. Since it's client-only state, we know it won't be set on the server and will **always** start as `undefined` on the client.
+:::
+
 ## SSR
 
 When dealing with [Server Side Rendering](../ssr/index.md), you need to take care of some extra steps in order to use composables within your stores.