From 7f75a64647360ef4024ada3cf02162c841cbd8af Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 22 Sep 2021 09:06:13 -0400
Subject: [PATCH] update vue usage

---
 docs/getting-started/usage.md | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/docs/getting-started/usage.md b/docs/getting-started/usage.md
index 1dd388a87..efe7b07b9 100644
--- a/docs/getting-started/usage.md
+++ b/docs/getting-started/usage.md
@@ -168,9 +168,14 @@ const MyComponent = (props) => {
 Vue [plays nice](https://custom-elements-everywhere.com/#vue) with custom elements. You just have to tell it to ignore Shoelace components. This is pretty easy because they all start with `sl-`.
 
 ```js
-Vue.config.ignoredElements = [/^sl-/];
+import { createApp } from 'vue';
+import App from './App.vue';
 
-new Vue({ ... });
+const app = createApp(App);
+
+app.config.compilerOptions.isCustomElement = tag => tag.startsWith('sl-');
+
+app.mount('#app');
 ```
 
 ### Binding Complex Data
@@ -197,7 +202,7 @@ If that's too verbose, you can use a custom directive instead.
 
 ### Using a Custom Directive
 
-You can use [this utility](https://www.npmjs.com/package/@shoelace-style/vue-sl-model) to add a custom directive to Vue that will work just like `v-model` but for Shoelace components. To install it, use this command.
+You can use [this utility](https://www.npmjs.com/package/@shoelace-style/vue-sl-model) to add a custom directive that will work just like `v-model` but for Shoelace components. To install it, use this command.
 
 ```bash
 npm install @shoelace-style/vue-sl-model
@@ -207,12 +212,15 @@ Next, import the directive and enable it like this.
 
 ```js
 import ShoelaceModelDirective from '@shoelace-style/vue-sl-model';
+import { createApp } from 'vue';
+import App from './App.vue';
 
-Vue.config.ignoredElements = [/^sl-/];
-Vue.use(ShoelaceModelDirective);
+const app = createApp(App);
+app.use(ShoelaceModelDirective);
 
-// Your init here
-new Vue({ ... });
+app.config.compilerOptions.isCustomElement = tag => tag.startsWith('sl-');
+
+app.mount('#app');
 ```
 
 Now you can use the `v-sl-model` directive to keep your data in sync!