Vue (version 2)

Vue plays nice with custom elements, so you can use Cordwainer Elements in your Vue apps with ease.

Installation

To add Cordwainer Elements to your Vue app, install the package from npm.

npm install @cordwainer/cw-elements

Next, include a theme and set 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.

import '@cordwainer/cw-elements/dist/themes/light.css';
import { setBasePath } from '@cordwainer/cw-elements/dist/utilities/base-path';

setBasePath('https://cdn.jsdelivr.net/npm/@cordwainer/cw-elements@1.1.1/cdn/');

Configuration

You’ll need to tell Vue to ignore Cordwainer Elements components. This is pretty easy because they all start with cw-.

import Vue from 'vue';
import App from './App.vue';

Vue.config.ignoredElements = [/cw-/];

const app = new Vue({
  render: h => h(App)
});

app.$mount('#app');

Now you can start using Cordwainer Elements 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.

<cw-color-picker :swatches.prop="mySwatches" />

Two-way Binding

One caveat is there’s currently no support for v-model on custom elements, but you can still achieve two-way binding manually.

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

If that’s too verbose for your liking, you can use a custom directive instead. This utility adds a custom directive that will work just like v-model but for Cordwainer Elements components. To install it, use this command.

npm install @cordwainer/vue-cw-model@1

Next, import the directive and enable it like this.

import Vue from 'vue';
import Cordwainer ElementsModelDirective from '@cordwainer/vue-cw-model';
import App from './App.vue';

Vue.use(Cordwainer ElementsModelDirective);
Vue.config.ignoredElements = [/cw-/];

const app = new Vue({
  render: h => h(App)
});

app.$mount('#app');

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

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