Use the plugin without NPM or YARN #15
Comments
|
Users can use <!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/[email protected]/dist/vue.global.js"></script>
<script src="https://unpkg.com/[email protected]/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>
`
}; |
|
If you want to register only components or directives:
Registration: app.component('money3', window["v-money3"].Money3Component);app.directive('money3', window["v-money3"].Money3Directive); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I wanna be able to support users that want to use this plugin directly in the browser, with the script tag.
The text was updated successfully, but these errors were encountered: