vue-currency-directive Demo

by Mahmoud Zakria

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<div id="app">
  <section>
    <div>Passing no arguments will reflect to "USD" currency by default and for locale it will use the configured browser language.</div>
    <input id="currency-input1" v-currency="amount.value" />
    <div v-if="amount.value">
      <span>
        <strong>Original amount:</strong> {{amount.value}}
      </span>
      <span v-if="amount.formatted">
       <strong>Formatted amount:</strong> {{amount.formatted}}
      </span>
    </div>
  </section>
  
   <section>
    <div>Passing currency argument only without locale.</div>
    <input id="currency-input2" v-currency:EUR="foo.value" />
    <div v-if="foo.value">
      <span>
        <strong>Original amount:</strong> {{foo.value}}
      </span>
      <span v-if="foo.formatted">
       <strong>Formatted amount:</strong> {{foo.formatted}}
      </span>
    </div>
  </section>
  
   <section>
    <div>Passing with locale argument and different currency.</div>
    <input id="currency-input3" v-currency:EGP[ar-EG]="bar.value" />
    <div v-if="bar.value">
      <span>
        <strong>Original amount:</strong> {{bar.value}}
      </span>
      <span v-if="bar.formatted">
       <strong>Formatted amount:</strong> {{bar.formatted}}
      </span>
    </div>
  </section>
</div>

CSS

body {
  padding: 15px
}

section {
  display: block;
  margin-bottom: 50px;
}

section div {
  margin: 10px 0
}

section div:last-of-type span {
  margin-right: 20px
}

section,
input {
  font-family: 'Arial', 'sans-serif';
  font-size: 16px
}

input {
  padding: 6px 15px
}

Vue

const fetchDirective = async () => {
  const request = await fetch(
    "https://raw.githubusercontent.com/mahmoudZakaria90/vue-currency-directive/adding-rollup/dist/demo.min.js"
  );
  const response = await request.text();
  const script = document.createElement("script");
  script.textContent = response;
  document.body.append(script);
  
  
  Vue.directive("currency", vueCurrencyDirective);

  new Vue({
    el: "#app",
    data: {
      amount: {
        value: "",
        formatted: ''
      },
       foo: {
        value: "",
        formatted: ''
      },
       bar: {
        value: "",
        formatted: ''
      }
    }
  });
};

fetchDirective();