vue-fixer v0.1.0

Vue-Fixer

The simple but powerful vue component for the fixer API

Features support

• Latest rates endpoint
• Convert endpoint
• Historical rates endpoint
• Time-Series data endpoint
• Fluctuation data endpoint

Getting Started

First at all make sure you have a fixer API KEY. If you don't, please grab one from here.

Installing

npm i vue-fixer -S

Or using unpkg

<script src="https://unpkg.com/vue-fixer/dist/vueFixer.umd.min.js"></script>

Include the component

import vueFixer from 'vue-fixer';

export default {
	name: 'my-component',
	components: {
		vueFixer,
		// vueFixer: window.vueFixer, if you are using the UMD version
	},
};

And now in your template

<vue-fixer api-key="my_fixer_secret_key" />

Events

The vue-fixer component emit an input event giving you all the data you want.

<vue-fixer api-key="my_fixer_secret_key" @input="myMethod" />
<pre>
	{{fixerData}}
</pre>

import vueFixer from 'vue-fixer';

function data() {
	return {
		fixerData: {},
	};
}

function myMethod(fixerData) {
	this.fixerData = fixerData;
}

export default {
	name: 'my-component',
	components: {
		vueFixer,
	},
	data,
	methods: {
		myMethod,
	},
};

Props

Events

Slots

Instead using events you can use slots and get the same result

<fixer :api-key="model.key">
  <div slot-scope="props">
    <div v-show="props.fixer.success">
      <header>
        <h2>Today 1 {{ props.fixer.base }} worth</h2>
      </header>
      <section>
        <ul v-for="(rate, label) in props.fixer.rates" :key="rate">
          <li>In {{label}} = {{ rate }}</li>
        </ul>
      </section>
    </div>
  </div>
</fixer>