From e0701fe3fcbd8e5593ba677c295e9b7f8ccd98b3 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 13 Nov 2023 15:56:23 -0500
Subject: [PATCH] add two-way binding info back

---
 docs/pages/frameworks/vue.md | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/docs/pages/frameworks/vue.md b/docs/pages/frameworks/vue.md
index 5a63d32d..6416c2ce 100644
--- a/docs/pages/frameworks/vue.md
+++ b/docs/pages/frameworks/vue.md
@@ -107,6 +107,19 @@ When binding complex data such as objects and arrays, use the `.prop` modifier t
 <sl-color-picker :swatches.prop="mySwatches" />
 ```
 
+### Two-way Binding
+
+One caveat is there's currently [no support for v-model on custom elements](https://github.com/vuejs/vue/issues/7830), but you can still achieve two-way binding manually.
+
+```html
+<!-- This doesn't work -->
+<sl-input v-model="name"></sl-input>
+<!-- This works, but it's a bit longer -->
+<sl-input :value="name" @input="name = $event.target.value"></sl-input>
+```
+
+If that's too verbose for your liking, you can use a custom directive instead. [This utility](https://www.npmjs.com/package/@shoelace-style/vue-sl-model) adds a custom directive that will work just like `v-model` but for Shoelace components.
+
 :::tip
 Are you using Shoelace with Vue? [Help us improve this page!](https://github.com/shoelace-style/shoelace/blob/next/docs/frameworks/vue.md)
 :::