Quick Start

Welcome to Iris Vue, created by Alkami. Here you’ll find Vue components that can be leveraged across our products to help you create high quality User Experiences (UX). The goals of this system are to:

Provide simplicity and ease of use when composing UIs for your site. From the straightforward to the complex – we’ve got you covered.
Assist you in creating a UI that is accessible according to WCAG 2.1 Level AA recommendations through our component-level accessiblity auto-wiring features and by providing you with the API properties and documentation needed when composing your UI. Please don't assume that your UI will be automatically accessible simply by using these components.
Accelerate and simplify your Iris Vue development experience by providing tools you’ll need to get the job done.

Project Setup

Setting up Iris Vue within your Vue project

Add the following links to the <head> element in index.html or wherever the entry point for your Vue app is:

<!-- Include in the Alkami Platform on desktop only -->
<link rel="stylesheet" href="https://iris.alkamitech.com/cdn/iris-vue@official/iris-components.shim.desktop.min.css" type="text/css" />
<!-- Include in the Alkami Platform on mobile only -->
<link rel="stylesheet" href="https://iris.alkamitech.com/cdn/iris-vue@official/iris-components.shim.mobile.min.css" type="text/css" />
<!-- Iris Foundation Styles (Utility Classes) -->
<link rel="stylesheet" href="https://iris.alkamitech.com/cdn/iris-foundation/latest/iris-foundation.min.css" type="text/css" />
<!-- Iris Vue Component Styles -->
<link rel="stylesheet" href="https://iris.alkamitech.com/cdn/iris-vue@official/iris-components.min.css" type="text/css" />

Then, add the following Iris Vue library script after the vue framework library script (usually inside the <body> element):

<script src="https://iris.alkamitech.com/cdn/iris-vue@official/iris-vue.umd.min.js" type="text/javascript"></script>

Additional Note

Alkami Developers should include Iris Vue by using the Alkami.Modules.WebAssets.Helpers in their widgets. Internal documentation here. SDK widgets automatically use this by default so no further changes are needed.

Example App Using CDN Links

Iris Vue Annotations, Syntax-highlighting and Auto-completion with VSCode and Vetur

If you are using VSCode, you can take advantage of Iris Vue tooling by installing the Vetur extension

Note: you will need to have access to Alkami's private NPM registry to download and install the iris-vue npm package

Install using NPM:

npm install --save-dev @alkami/iris-vue-helper-json

Install using Yarn:

yarn add -D @alkami/iris-vue-helper-json

No Preview