Vue (version 2)

Frameworks Vue (version 2)

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

These instructions are for Vue 2. If you're using Vue 3 or above, please see the Vue 3 instructions.

Installation

Link to This Section

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

Link to This Section

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

Link to This Section

Binding Complex Data

Link to This Section

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

Link to This Section

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>

Are you using Web Awesome with Vue 2? Help us improve this page!