Search code examples
vue.jsvue-cli

How to use static JS with Vue CLI?

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?

Solution

  • 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() }

    ta-da

    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.