@uportal/api-template-vue

api-template-vue

Installation

# install with npm
npm install @uportal/api-template-vue

# install with yarn
yarn add @uportal/api-template-vue

install with maven

<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>uportal__api-template-vue</artifactId>
    <version>{version number goes here}</version>
</dependency>

install with gradle

compile 'org.webjars.npm:uportal__api-template-vue:{version number goes here}'

Usage as Web Component

The component requires a data-api-url (URL to acquire a JSON payload).

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/@uportal/api-template-vue"></script>

<api-template-vue data-api-url="/uPortal/api/v5-0/people/me">
  <div class="card">
    <div class="card-body">
      <h3 class="card-title">{{ displayName[0] }}</h3>
      <table class="table">
        <caption>
          User attributes
        </caption>
        <tbody>
          <tr>
            <td>username:</td>
            <td>{{ username[0] }}</td>
          </tr>
          <tr>
            <td>email:</td>
            <td>{{ mail[0] }}</td>
          </tr>
          <tr>
            <td>Phone:</td>
            <td>{{ telephoneNumber[0] }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</api-template-vue>

Options

• data-api-url (required, string): URL of the REST API that provides JSON data to the template.

Slot Content

The default slot defines the Vue-based template containing the markup that will appear on the page.

Changelog

[1.24.0][] - 2019-02-06

Feature

• api-template-vue: Wrap JSON returned by the specified REST API in a guaranteed object called data (#250).
• waffle-menu: Refactor the component from React to Vue (#259)

Fix

• api-template-vue: Make axios resove promises even for non-200 status (#259)

Test

• CI test on lts and stable node, and on osx and windows (#260)

Docs

• Updated the docs for creating web components with Vue (#251)
• Provide the french translation of vue.js guide + fix in title hierarchy in the english doc (#255)

Chore

• Update dependencies (#240, #252, #253, #256)