Vue (version 2)

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

Installation Jump to heading

To add Web Awesome to your Vue app, install the package from npm.

npm install @awesome.me/webawesome

Next, import the Web Awesome stylesheet, import the components you need, and then start using Web Awesome!

// main.js or main.ts
import '@awesome.me/webawesome/dist/styles/webawesome.css';
import '@awesome.me/webawesome/dist/components/button/button.js';

Configuration Jump to heading

You'll need to tell Vue to ignore Web Awesome components. This is pretty easy because they all start with wa-.

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

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

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

app.$mount('#app');

Now you can start using Web Awesome components in your app!

Usage Jump to heading

Binding Complex Data Jump to heading

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.

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

Two-way Binding Jump to heading

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 -->
<wa-input v-model="name"></wa-input>
<!-- ✅ This works, but it's a bit longer -->
<wa-input :value="name" @input="name = $event.target.value"></wa-input>