search

jonathanpmartins / v-money3

Vue3 currency input/directive mask
MIT License
103 stars 27 forks source link

Use the plugin without NPM or YARN #15

Closed jonathanpmartins closed 3 years ago

jonathanpmartins commented 3 years ago

I wanna be able to support users that want to use this plugin directly in the browser, with the script tag.

jonathanpmartins commented 3 years ago

Users can use v-money3 plugin without a package manager. Todo that, just import the UMD bundle file. After the plugin is loaded, it will be available inside window['v-money3'].

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Hello v-money3!</title>
    <script src="https://unpkg.com/vue@3.0.10/dist/vue.global.js"></script>
    <script src="https://unpkg.com/v-money3@3.10.2/dist/v-money3.umd.js"></script>
    <script src="/src/main.js" type="module"></script>
    <!--
      To prevent waterfall-loading, we preload
      all the JS Module files of our application.
    -->
    <link rel="modulepreload" href="/src/App.js" />
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

With Vue 3, users need to register the plugin:

import App from "./App.js";

const app = window.Vue.createApp({
  render: () => window.Vue.h(App)
});

app.use(window["v-money3"].default);

app.mount("#app");

All Vue components are js files in the browser.

export default {
  name: "App",
  data() {
    return {
      amount: 0
    };
  },
  computed: {
    config() {
      return {
        decimal: ",",
        thousands: ".",
        prefix: "R$ ",
        suffix: "",
        precision: 2,
        masked: false /* doesn't work with directive */
      };
    }
  },
  template: `
    <div>
      <money3 v-model="amount" v-bind="config" />
    </div>
  `
};
jonathanpmartins commented 3 years ago

If you want to register only components or directives:

Registration:

app.component('money3', window["v-money3"].Money3Component);
app.directive('money3', window["v-money3"].Money3Directive);