Frameworks Vue (version 2)

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

Then import the Web Awesome stylesheet and the components you need:

// 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

Tell Vue to ignore Web Awesome's custom elements. Because they all start with wa-, a single rule covers them:

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

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

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

app.$mount('#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: custom elements don't support v-model, but you can still bind two ways 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>

Web Awesome is ready to use.
Explore components, utilities, and theming to start building.

Next Steps

Link to This Section

Components

Start building your interface.

CSS Utilities

Lay out and style without custom CSS.

Theming

Match Web Awesome to your brand.

Vue (version 2) Docs

The official Vue (version 2) documentation.

Using Web Awesome with Vue (version 2)?
Found a bug or have a suggestion? Help make things more awesome!

Share feedback