vue-number-input
vue-number-input copied to clipboard
fengyuanchen
Doesn't seem to work when used without build tools
When just importing vue3 in a static page, I can't seem to use this (or maybe the instructions are just not showing this special case). Partly following your Readme, I have this in the head:
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
}
}
</script>
<script src="https://unpkg.com/vue-numeric-input"></script>
and this script section:
<script type="module">
import { createApp } from 'vue'
import VueNumberInput from '@chenfengyuan/vue-number-input';
const app = createApp({}).mount("#app")
app.component(VueNumberInput.name, VueNumberInput)
</script>
This fails with Uncaught TypeError: Failed to resolve module specifier "@chenfengyuan/vue-number-input". Relative references must start with either "/", "./", or "../".
Try this:
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js",
"@chenfengyuan/vue-number-input": "https://unpkg.com/@chenfengyuan/vue-number-input@2/dist/vue-number-input.esm.js"
}
}
</script>
<script type="module">
import { createApp } from 'vue'
import VueNumberInput from '@chenfengyuan/vue-number-input'
const app = createApp({}).mount("#app")
app.component(VueNumberInput.name, VueNumberInput)
</script>
Importmaps are sadly not supported on Safari (iOS and macOS) and on Firefox. It works fine with your suggestion in Chrome though.
Could you also add a build with gobal exports so it can be used without an importmap like vue can be used?
Don't use the module mode, try this(vue-number-input-demo.html):
<!DOCTYPE html>
<html lang="en">
<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>VueNumberInput Demo</title>
</head>
<body>
<div id="app">
<vue-number-input controls></vue-number-input>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/@chenfengyuan/vue-number-input@2/dist/vue-number-input.js"></script>
<script>
const app = Vue.createApp({});
app.component(VueNumberInput.name, VueNumberInput);
app.mount("#app");
</script>
</body>
</html>
Thanks, I was sure I tried that initially. Your docs could include this case though, as there is no demo file to be found that includes the above case.