https://github.com/shoelace-style/vue-sl-model
A custom Vue directive that makes two-way binding Shoelace components easier.
https://github.com/shoelace-style/vue-sl-model
Last synced: about 1 month ago
JSON representation
A custom Vue directive that makes two-way binding Shoelace components easier.
- Host: GitHub
- URL: https://github.com/shoelace-style/vue-sl-model
- Owner: shoelace-style
- License: mit
- Created: 2020-07-11T14:53:06.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2022-11-14T14:57:47.000Z (almost 3 years ago)
- Last Synced: 2025-03-26T07:04:43.716Z (6 months ago)
- Language: JavaScript
- Homepage:
- Size: 154 KB
- Stars: 7
- Watchers: 3
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Vue Directive for Two-way Binding Shoelace Components
A custom Vue 3 directive that makes two-way binding [Shoelace components](https://shoelace.style) easier.
Instructions for Vue 2 users
If you're looking for a directive that's compatible with Vue 2, install version 1 of this package:
```bash
npm install @shoelace-style/vue-sl-model@1
```
Then [follow these instructions](https://github.com/shoelace-style/vue-sl-model/tree/77cac5afd36bd6e3321b0a738e3c1751ff006158#vue-directive-for-two-way-binding-shoelace-components) instead.
## Usage
Install the directive with this command.
```sh
npm install @shoelace-style/vue-sl-model
```
Next, import the directive into your app and enable it like this.
```js
import "@shoelace-style/shoelace/dist/themes/light.css"
import "@shoelace-style/shoelace/dist/components/input/input"
import ShoelaceModelDirective from '@shoelace-style/vue-sl-model'
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.use(ShoelaceModelDirective)
app.config.compilerOptions.isCustomElement = tag => tag.startsWith('sl-')
// If using Vite, the above "isCustomElement" needs to be deleted and defined in vite.config.js
// See below for an example vite.config.js
app.mount('#app')
```
Now you can use the `v-sl-model` directive to keep your data in sync!
```html
```
## Why is this necessary?
Currently, there's [no support for v-model on custom elements](https://github.com/vuejs/vue/issues/7830) in Vue. You can handle two-way binding manually, but's it rather verbose.
```html
```
This utility solves this problem by creating a custom directive that works just like `v-model` but for Shoelace components.
## Using Vite
```js
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag.startsWith('sl-')
}
},
})
]
})
```