@shoelace-style/vue-sl-model

A custom Vue directive that makes two-way binding Shoelace components easier.

Usage no npm install needed!

<script type="module">
  import shoelaceStyleVueSlModel from 'https://cdn.skypack.dev/@shoelace-style/vue-sl-model';
</script>

README

Vue Directive for Two-way Binding Shoelace Components

A custom Vue directive that makes two-way binding Shoelace components easier.

Usage

Install the directive with this command.

npm install @shoelace-style/vue-sl-model

Next, import the directive into your app and enable it like this.

import ShoelaceModelDirective from 'shoelace-model-directive.js';

Vue.use(ShoelaceModelDirective);
Vue.config.ignoredElements = [/^sl-/];

// Your init here
new Vue({ ... });

Now you can use the v-sl-model directive to keep your data in sync!

<sl-input v-sl-model="name"></sl-input>

Why is this necessary?

Currently, there's [no support for v-model on custom elements](no support for v-model on custom elements) in Vue. You can handle two-way binding manually, but's it rather verbose.

<!-- This doesn't work -->
<sl-input v-model="name">
  <!-- This works, but it's a bit longer -->
  <sl-input :value="name" @input="name = $event.target.value"></sl-input
></sl-input>

This utility solves this problem by creating a custom directive that works just like v-model but for Shoelace components.