From b948a07a4d6a62d1e95a279643dbc417ea3c0fd6 Mon Sep 17 00:00:00 2001
From: gennitdev <114821397+gennitdev@users.noreply.github.com>
Date: Wed, 29 Mar 2023 13:48:39 -0700
Subject: [PATCH] Include slot example for Vue (#1271)

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

diff --git a/docs/frameworks/vue.md b/docs/frameworks/vue.md
index d31c46723..1d4ba5cf9 100644
--- a/docs/frameworks/vue.md
+++ b/docs/frameworks/vue.md
@@ -98,3 +98,21 @@ When binding complex data such as objects and arrays, use the `.prop` modifier t
 ```
 
 ?> Are you using Shoelace with Vue? [Help us improve this page!](https://github.com/shoelace-style/shoelace/blob/next/docs/frameworks/vue.md)
+
+### Slots
+
+To use Shoelace components with slots, follow the Vue documentation on using [slots with custom elements.](https://vuejs.org/guide/extras/web-components.html#building-custom-elements-with-vue) Here is an example:
+
+```vue
+<sl-drawer
+  label="Drawer"
+  placement="start"
+  class="drawer-placement-start"
+  :open="drawerIsOpen"
+>
+  This drawer slides in from the start.
+  <div slot="footer">
+    <sl-button variant="primary" @click=" drawerIsOpen = false">Close</sl-button>
+  </div>
+</sl-drawer>
+```