Vue Guide

This guideline uses Vue 3 and Vue CLI v4.5.13

Install Vue CLI.

npm install -g @vue/cli

Initialize your project

Create your new Vue application using the vue create command.

vue create my-app

Once your application has been created and configured using the command line prompts, you should be able to serve the application.

npm run serve

Install ELF elements and themes

Install EF elements and themes.

npm install @refinitiv-ui/elements
npm install @refinitiv-ui/halo-theme

Import elements that you want to use and themes in src/main.js.

import '@refinitiv-ui/elements/lib/loader';
import '@refinitiv-ui/elements/lib/button';
import '@refinitiv-ui/elements/lib/panel';
import '@refinitiv-ui/elements/lib/text-field';
import '@refinitiv-ui/elements/lib/password-field';

import '@refinitiv-ui/halo-theme/dark/imports/native-elements';
import '@refinitiv-ui/elements/lib/loader/themes/halo/dark';
import '@refinitiv-ui/elements/lib/button/themes/halo/dark';
import '@refinitiv-ui/elements/lib/panel/themes/halo/dark';
import '@refinitiv-ui/elements/lib/text-field/themes/halo/dark';
import '@refinitiv-ui/elements/lib/password-field/themes/halo/dark';

Components can be used like any other native HTMLElement. Try replacing content in src/App.vue with the code below.

<template>
  <ef-panel id="login-page" spacing>
    <ef-loader v-if="loading"></ef-loader>
    <template v-else>
      <h1>{{ title }}</h1>
      <ef-text-field placeholder="Username"></ef-text-field>
      <ef-password-field placeholder="Password"></ef-password-field>
      <div id="button-group">
        <ef-button v-on:click="login">Login</ef-button>
        <ef-button>Cancel</ef-button>
      </div>
    </template>
  </ef-panel>
</template>

<script>
export default {
  name: 'app',
  data: function() {
    return {
      title: 'Hello!',
      loading: false,
    };
  },
  methods: {
    login: function() {
      this.loading = true;

      setTimeout(() => {
        this.title = 'Done!';
        this.loading = false;
      }, 3000);
    },
  },
};
</script>

<style>
#login-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 450px;
  height: 200px;
  margin: 40px auto;
}

#button-group {
  margin: 10px 0;
}
</style>

Finally, try starting your app and it should be available to access through http://localhost:8080/.

npm run serve

That's all for now. Contact us at RefinitivUIDev@refinitiv.com, if you need any extra help!