Vue

Installation

To add Azalea Kit UI to your Vue app, install the package from npm.

npm install git@bitbucket.org:azaleahealth/azalea-kit-ui.git

        
  
        
      

Next, include a theme in your main entry point.

// main.js or main.ts
import '@azaleahealth/azalea-kit-ui/themes/light.css';

        
  
        
      

Configuration

If you haven’t configured your Vue.js project to work with custom elements/web components, follow the instructions here based on your project type to ensure your project will not throw an error when it encounters a custom element.

Types

Once you have configured your application for custom elements, you should be able to use Azalea Kit UI in your application without it causing any errors. Unfortunately, this doesn’t register the custom elements to behave like components built using Vue. To provide autocomplete information and type safety for your components, you can import the Azalea Kit UI Vue types into your tsconfig.json to get better integration in your standard Vue and JSX templates.

{
  "compilerOptions": {
    "types": ["@azaleahealth/azalea-kit-ui/dist/types/vue"]
  }
}

        
  
        
      

Usage

Example

<template>
  <ahi-button variant="primary" @click="count++"> Count is: {{ count }} </ahi-button>
</template>

<script setup>
  import { ref } from 'vue';
  import '@azaleahealth/azalea-kit-ui/components/button/button.js';

  const count = ref(0);
</script>

        
  
        
      

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.

<ahi-user-menu :user.prop="myUserObj"></ahi-user-menu>

        
  
        
      

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

        
  
        
      

Using Icons

Icons are loaded automatically — no imports or registration required. Simply use the name attribute with any Tabler icon name.

<template>
  <ahi-icon name="home"></ahi-icon>
  <ahi-icon name="phone"></ahi-icon>
</template>