layout: page title: Components navigation: 3

æternity æpp Components

Overview

The æternity æpp components are meant to provide æpp developers with reusable Vue.js components that adhere to our styleguide.

The github repository is here.

Note: this repository is currently in active development and things might break / change in the future but we will be adhering to the Semantic versioning.

Documentation

Full component documentation can be found at http://aeternity.com/aepp-components/

Community

• Code Guidelines
• Code of Conduct

Installation & Usage

Install the æternity æpp components via npm

Requires

• Vue
• @vue/cli
• NPM
• Aeternity æpp components.

1. Make sure Vue CLI globally installed

npm install -g @vue/cli

2. Create a Vue project using

vue create project-name

3. Enter into your new Vue project.

cd project-name

4. Now in your project run

npm i

5. Install the components package, currently #develop branch is the most up to date version.

npm i --save https://github.com/aeternity/aepp-components.git#develop

6. Finally run your app:

npm run serve

7. The output should appear similar to the following:

 App running at:
 - Local:   http://localhost:8080/
 - Network: http://192.xxx.xxx.xxx:8080/

Importing components in your application

In your new Vue project with the downloaded directory open your Table of Contents and navigate too src --> main.js There its the root file of your application, where you can import æpp components.

Importing styles

In case you want to include normalize.css, and some style resets, include: this will include fonts and some small global css styles

import '@aeternity/aepp-components/dist/aepp.global.css'

If you already have global styles in your application, but only need the fonts, use this import file.

import '@aeternity/aepp-components/dist/aepp.fonts.css'

Import the entire components styles (this will include all components css, except fonts and global styles)

import '@aeternity/aepp-components/dist/aepp.components.css'

Importing components

Below there's a list of ways in which you can import your components to your application.

Method 1: global registration of all components

import Components from '@aeternity/aepp-components'

Vue.use(Components)

Method 2: global registration of single components

import { AeButton } from '@aeternity/aepp-components'

Vue.use(AeButton)
// or
Vue.component('ae-button', AeButton)

Method 3: local registration of single components

import { AeButton } from '@aeternity/aepp-components'

new Vue({
  components: {
    AeButton
  }
})

Method 4: Local registration and import of a single component

import '@aeternity/aepp-components/dist/ae-button/ae-button.css'
import AeButton from '@aeternity/aepp-components/dist/ae-button/ae-button.vue'

new Vue({
  components: {
    AeButton
  }
})

Global registration (Method 1 & 2) will make the æternity æpp components available throughout your app, local registration (Method 3 and 4) will have to be declared in each relevant section of your app.

Here's an example of a component usage:

<template>
  <div id="app">
    <ae-button @click="buttonPress()">My Button</ae-button>
  </div>
</template>

There's also a helper mixin / directives and filters available for handy utilities.

Mixins

import { mixins } from '@aeternity/aepp-components'

export default {
  /* … */
  mixins: [mixins.events],
}

Directives

import { directives } from '@aeternity/aepp-components'

export default {
  /* … */
  directives: { removeSpacesOnCopy: directives.removeSpacesOnCopy },
}

Filters

import { filters } from '@aeternity/aepp-components'

export default {
  /* … */
  mixins: [filters.example],
}

How to use components in your æpp: Examples

Below you'll find some examples how you can import and use the components.

main.js

import Vue from 'vue'
import App from './App.vue'
import Components from '@aeternity/aepp-components'

Vue.use(Components)

new Vue({
  el: '#app',
  render: h => h(App)
})

App.vue

<template>
  <main id="app">
    <!-- add components here -->
    <ae-button>BUTTON</ae-button>
  </main>
</template>
<script>
import { AeButton, mixins } from '@aeternity/aepp-components'

export default {
  name: 'app',
  mixins: [mixins.events], 
  components: {
    AeButton
  },
  data () {
    return {
      showModal: false,
      identity: {
        balance: '1337210000000000000', // wei as string, int or BN
        address: '0x1234567890987654321'
      }
    }
  },

  methods: {
    buttonPress (what) {
      console.log("button pressed", what)
    }
  }
}
</script>
<style>
  div.example {
    margin-bottom: 40px;
  }
</style>

Further documentation on the components can be found at http://aeternity.com/aepp-components/.