+ This drawer slides in from the start.
+
+ (drawerIsOpen = false)}>
+ Close
+
+
+
+```
\ No newline at end of file
diff --git a/packages/webawesome/docs/docs/frameworks/vue-2.md b/packages/webawesome/docs/docs/frameworks/vue-2.md
new file mode 100644
index 000000000..5b42e54f0
--- /dev/null
+++ b/packages/webawesome/docs/docs/frameworks/vue-2.md
@@ -0,0 +1,107 @@
+---
+title: Vue (version 2)
+description: Tips for using Web Awesome in your Vue 2 app.
+layout: page-outline
+---
+
+# Vue (version 2)
+
+Vue [plays nice](https://custom-elements-everywhere.com/#vue) with custom elements, so you can use Web Awesome in your Vue apps with ease.
+
+:::tip
+These instructions are for Vue 2. If you're using Vue 3 or above, please see the [Vue 3 instructions](/frameworks/vue).
+:::
+
+## Installation
+
+To add Web Awesome to your Vue app, install the package from npm.
+
+```bash
+npm install @shoelace-style/shoelace
+```
+
+Next, [include a theme](/getting-started/themes) and set the [base path](/getting-started/installation#setting-the-base-path) for icons and other assets. In this example, we'll import the light theme and use the CDN as a base path.
+
+```jsx
+import '@shoelace-style/shoelace/%NPMDIR%/themes/light.css';
+import { setBasePath } from '@shoelace-style/shoelace/%NPMDIR%/utilities/base-path';
+
+setBasePath('https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/');
+```
+
+:::tip
+If you'd rather not use the CDN for assets, you can create a build task that copies `node_modules/@shoelace-style/shoelace/dist/assets` into a public folder in your app. Then you can point the base path to that folder instead.
+:::
+
+## Configuration
+
+You'll need to tell Vue to ignore Web Awesome components. This is pretty easy because they all start with `sl-`.
+
+```js
+import Vue from 'vue';
+import App from './App.vue';
+
+Vue.config.ignoredElements = [/sl-/];
+
+const app = new Vue({
+ render: h => h(App)
+});
+
+app.$mount('#app');
+```
+
+Now you can start using Web Awesome components in your app!
+
+## Usage
+
+### Binding Complex Data
+
+When binding complex data such as objects and arrays, use the `.prop` modifier to make Vue bind them as a property instead of an attribute.
+
+```html
+