I want to use VueNumberFormat (vue 2 library) in browser.
I load libraries in my html page
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/library.js"></script>
Next in my js file I'm trying to use this library
Vue.use(VueNumberFormat, {prefix: 'R$ ', decimal: ',', thousand: '.'});
After page loading I got error in browse console
library.js:3 Uncaught ReferenceError: require is not defined
at library.js:3:11
Is there any way to use this or another library in browser enviroments?
The cdn link you are using uses require, so getting it to work could get tricky.
The cdn contains a esm module which you could use like
<script type="module">
import vueNumberFormat from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'
</script>
But this could get confusing if you're not familiar with using esm modules.
Alternatively, the github repo contains umd files which you can directly use https://github.com/igortrinidad/vue-number-format/blob/d5345761b21475d489e31ef94411f8dfd0363b13/dist/VueNumberFormat.umd.min.js I couldn't find a cdn for this, so you would have to download this file and either host it yourself or find some cdn for this, or as a last resort include the contents in a script tag
<script>
(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("vue")):"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["VueNumberFormat"]=t(require("vue")):e["VueNumberFormat"]=t(e["Vue"])})("undefined"!==typeof self?self:this,(function(e){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s="fb15")}({"025e":function(e,t,n){"use strict";n.d(t,"a",(function(){return o})),n.d(t,"d",(function(){return u})),n.d(t,"b",(function(){return i})),n.d(t,"c",(function(){return a}));var r=n("ffd9");const o=(e=0,t=r["a"])=>{null===e&&(e=0);const n=Object.assign({},r["a"],t);"number"!==typeof e||n.isInteger||(e=e.toFixed(s(n.precision)));const o=m(e,n.acceptNegative)?"-":"",u=c(e),i=f(u,n.precision),a=d(i).split(".");var b=a[0];const v=a[1];return b=p(b,n.thousand),o+n.prefix+l(b,v,n.decimal)+n.suffix},u=(e=0,t={precision:2,isInteger:!1,acceptNegative:!0})=>{null===e&&(e=0);const n=Object.assign({},r["a"],t);var o=m(e,n.acceptNegative)?-1:1,u=c(e),i=f(u,n.precision);return n.isInteger?parseInt(`${m(e,n.acceptNegative)?"-":""}${u.toString()}`):parseFloat(i)*o},i=(e,t)=>{var n=function(){e.setSelectionRange(t,t)};e===document.activeElement&&setTimeout(n,1)},a=(e,t=r["a"])=>{var n=e.value.length-e.selectionEnd;e.value=o(e.value,t),n=Math.max(n,t.suffix.length),n=e.value.length-n,n=Math.max(n,t.prefix.length+1),i(e,n)};function c(e){return d(e).replace(/\D+/g,"")||"0"}function s(e){return Math.max(0,Math.min(e,20))}function f(e,t){var n=Math.pow(10,t),r=parseFloat(e)/n;return r.toFixed(s(t))}function p(e,t){return e.replace(/(\d)(?=(?:\d{3})+\b)/gm,"$1"+t)}function l(e,t,n){return t?e+n+t:e}function d(e){return e?e.toString():""}function m(e,t=!0){if(!t)return!1;"string"!=typeof e&&(e=e.toString());const n=e.indexOf("+")>=0,r=0!==e&&e.indexOf("-")>=0||"-"==e[e.length-1];return!(n||!r)}},"6b0d":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=(e,t)=>{const n=e.__vccOpts||e;for(const[r,o]of t)n[r]=o;return n}},"7fb5":function(e,t,n){"use strict";var r=n("8bbf");const o=["value"];function u(e,t,n,u,i,a){return Object(r["openBlock"])(),Object(r["createElementBlock"])("input",{value:a.formattedValue,inputmode:"numeric",onInput:t[0]||(t[0]=e=>a.onInput(e)),onFocus:t[1]||(t[1]=e=>a.onFocus(e))},null,40,o)}var i=n("025e"),a=n("ffd9"),c={name:"VueNumberFormat",props:{value:{type:[String,Number],default:null},options:{type:Object,default:()=>{}}},emits:["input","update:value"],computed:{mergedOptions(){const e=this.$vueNumberFormatOptions||a["a"];return this.options?Object.assign({},e,this.options):e},formattedValue(){return Object(i["a"])(this.value,this.mergedOptions)}},created(){this.$vueNumberFormatOptions||(this.$vueNumberFormatOptions=a["a"])},methods:{onFocus(e){Object(i["b"])(e.target,e.target.value.length-this.mergedOptions.suffix.length)},onInput(e){Object(i["c"])(e.target,this.mergedOptions);const t=Object(i["d"])(e.target.value,this.mergedOptions);this.updateValue(t)},updateValue(e){this.$vueNumberFormatOptions&&"v2"===this.$vueNumberFormatOptions.vueVersion?this.$emit("input",e):this.$emit("update:value",e)}}},s=n("6b0d"),f=n.n(s);const p=f()(c,[["render",u]]);t["a"]=p},"8bbf":function(t,n){t.exports=e},b635:function(e,t,n){"use strict";(function(e){var r=n("7fb5"),o=n("ffd9"),u=n("025e");const i=(e,t)=>{if(i.installed)return;i.installed=!0,e.component("VueNumberFormat",r["a"]);const n=Object.assign({},o["a"],t);"undefined"!=typeof e.prototype?(n.vueVersion="v2",e.prototype.$vueNumberFormatOptions=n):(n.vueVersion="v3",e.config.globalProperties.$vueNumberFormatOptions=n),e.mixin({methods:{vueNumberFormat(e,t=n){const r=Object.assign({},n,t);return Object(u["a"])(e,r)},vueNumberUnformat(e,t=n){const r=Object.assign({},n,t);return Object(u["d"])(e,r)}}})};Object.assign(r["a"],{install:i,format:u["a"],unformat:u["d"]});let a=null;"undefined"!==typeof window?a=window.Vue:"undefined"!==typeof e&&(a=e.Vue),a&&a.use(r["a"]),t["a"]=r["a"]}).call(this,n("c8ba"))},c8ba:function(e,t){var n;n=function(){return this}();try{n=n||new Function("return this")()}catch(r){"object"===typeof window&&(n=window)}e.exports=n},fb15:function(e,t,n){"use strict";if(n.r(t),"undefined"!==typeof window){var r=window.document.currentScript,o=r&&r.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);o&&(n.p=o[1])}var u=n("b635");t["default"]=u["a"]},ffd9:function(e,t,n){"use strict";t["a"]={prefix:"R$ ",suffix:"",decimal:",",thousand:".",precision:2,acceptNegative:!0,isInteger:!1}}})}));
</script>