diff --git a/docs/frameworks/vue-2.md b/docs/frameworks/vue-2.md index 8bd729ab..95ef603d 100644 --- a/docs/frameworks/vue-2.md +++ b/docs/frameworks/vue-2.md @@ -28,14 +28,16 @@ setBasePath('https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dis You'll need to tell Vue to ignore Shoelace components. This is pretty easy because they all start with `sl-`. ```js -import { createApp } from 'vue'; +import Vue from 'vue'; import App from './App.vue'; -const app = createApp(App); +Vue.config.ignoredElements = [/sl-/]; -app.config.compilerOptions.isCustomElement = tag => tag.startsWith('sl-'); +const app = new Vue({ + render: h => h(App) +}); -app.mount('#app'); +app.$mount('#app'); ``` Now you can start using Shoelace components in your app! @@ -56,31 +58,32 @@ One caveat is there's currently [no support for v-model on custom elements](http ```html - - - + + + ``` 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. To install it, use this command. ```bash -npm install @shoelace-style/vue-sl-model +npm install @shoelace-style/vue-sl-model@1 ``` Next, import the directive and enable it like this. ```js +import Vue from 'vue'; import ShoelaceModelDirective from '@shoelace-style/vue-sl-model'; -import { createApp } from 'vue'; import App from './App.vue'; -const app = createApp(App); -app.use(ShoelaceModelDirective); +Vue.use(ShoelaceModelDirective); +Vue.config.ignoredElements = [/sl-/] -app.config.compilerOptions.isCustomElement = tag => tag.startsWith('sl-'); +const app = new Vue({ + render: h => h(App) +}); -app.mount('#app'); +app.$mount('#app'); ``` Now you can use the `v-sl-model` directive to keep your data in sync! @@ -89,4 +92,4 @@ Now you can use the `v-sl-model` directive to keep your data in sync! ``` -?> Are you using Shoelace with Vue? [Help us improve this page!](https://github.com/shoelace-style/shoelace/blob/next/docs/frameworks/vue.md) +?> Are you using Shoelace with Vue? [Help us improve this page!](https://github.com/shoelace-style/shoelace/blob/next/docs/frameworks/vue-2.md)