I'm creating a Bootstrap Vue application (built with Vue CLI), and there's a Javascript library I want to be able to utilize: https://nadchif.github.io/html-duration-picker.js/. I tried putting the file in /assets and then using import in the script portion of App.vue (import './assets/html-duration-picker.min'), but I have not been able to get the script to work, not sure why (nothing happens, no duration picker shows). As an alternative, I thought I could maybe simply load the library in the traditional way in the head of index.html. But I'm not clear what the src URL should be for a file in the assets directory. Or should it be in the assets/public directory?
Add a comment
|
1 Answer
Honestly, you might as well use the npm package, if you are using Vue CLI, to save yourself a lot of trouble:
npm i html-duration-picker
DOCUMENTATION.md is where the installation instructions lie. While there aren't any for Vue, there are instructions for Angular, and it's fairly easy to get it working for Vue.
Just import html-duration-picker:
import * as HtmlDurationPicker from "html-duration-picker";
...and initalize it in mounted():
mounted() { HtmlDurationPicker.init() }
You can also run HtmlDurationPicker.refresh(); to "update dynamically loaded input boxes." I don't think this is necessary if you use v-model to bind the boxes' values to data properties which update fine from either end.
Here's a sandbox you can check out for more info.
If you do want to import it manually from assets, though, then what you're doing is probably fine (though you might need to add the .js to then end of the path); you'll just have to initialize it.
3 Comments
John Moore
Thanks. I tried it the way you have done and the duration picker is still not working, which suggests the problem lies elsewhere for me. Very handy to have a demo of it working successfully with Vue.
John Moore
LATER: My problem was that the HTML where I used the picker was in a v-if block which was initially false. When I changed it to v-show, so it was already in the DOM, it displayed OK. Not sure what the neatest way to resolve this is, but maybe a watcher on the property tested in v-if.
John Moore
Actually, replacing v-if with v-show did not properly resolve the issue. I had
<template v-if=... which I replaced with <template v-show=... and the picker worked OK, but I subsequently discovered that v-show doesn't conditionally display correctly when used with template. So I changed template to div but this screwed up the formatting of the duration picker (the up-down carets were completely misplaced). It really doesn't want to play nicely with Vue!