Using jquery ui and time picker with vue

Question

I am trying to setup vue cli with jquery ui, but couldn't figure out how to use jquery ui components. I need to load following js files

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js
https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-timepicker-addon.min.js
https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-sliderAccess.js

and css files

https://code.jquery.com/ui/1.10.0/themes/smoothness/jquery-ui.css
https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-timepicker-addon.min.css

To make the timepicker work. Here is a codepen link where I have tested the functionality. https://codepen.io/cksachdev/pen/EJgGVR

Any suggestions on how should I go about loading these using vue-cli/ webpack configuration.

Here is what I have tried so far:

 module: {
    loaders: [
      { test: /\.css$/, loader: ['style-loader', 'css-loader'] },
      { test: /\.(jpe?g|png|gif)$/i, loader: 'file-loader' },
    ],
  },
  plugins: [
    // eslint-disable-next-line no-undef
    new webpack.ProvidePlugin({
      $: 'jquery',
      jquery: 'jquery',
      'window.jQuery': 'jquery',
      jQuery: 'jquery',
    }),
  ],
  resolve: {
    alias: {
      'jquery-ui': '../../../node_modules/jquery-ui/ui/widgets',
      'jquery-ui-css': '../../../node_modules/jquery-ui/../../themes/base',
    },
  },

Matt Oestreich · Accepted Answer · 2019-04-19T22:44:06.087

Edit 2: I went ahead and wrote a demo project that you can mirror to accomplish this..

View the demo here

View the source code/repo here

Again, not sure why you would want to do this, but ^that^ is (another) solution..

You can add those scripts and css files inside the 'index.html' file (public -> index.html), and use it like this:

Edit 1: it is extremely important to note there is no reason you need to import (the rather large) jQuery or even use jQuery. The Vue ecosystem has plenty of existing options for things like this..

vue2-timepicker and Vuetify timepicker (Vuetify is more of a full library of pre-styled components)..

[CodePen mirror]

/* TIMEPICKER COMPONENT */
const VueTimepicker = {
  template: "#vue-timepicker",
  computed: {
    id() {
      // give the component a unique id/name
      return "time-picker-" + this._uid;
    }
  },
  mounted() {
    $("#" + this.id).timepicker({
      timeFormat: "HH:mm:ss:l"
    });
  }
};

/* VUE APP */
new Vue({
  el: "#app",
  components: {
    VueTimepicker,
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-timepicker-addon.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-sliderAccess.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.0/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-timepicker-addon.min.css" />

<!-- ******************** -->
<!-- VUE APP -->
<!-- ******************** -->
<div id="app">
  <div>
    <div>
      <span>Timepicker 1</span>
      <vue-timepicker/>
    </div>
    <div style="margin-top: 20px;">
      <span>Timepicker 2</span>
      <vue-timepicker/>
    </div>
  </div>
</div>

<!-- ******************** -->
<!-- TIMEPICKER COMPONENT -->
<!-- ******************** -->
<script type="text/x-template" id="vue-timepicker">
  <div>
    <input type="text" :name="id" :id="id" value=" ">
  </div>
</script>

Thanks for your response. I am looking for a webpack based solution using vue-cli. — Chetan Sachdev, Apr 19 '19 at 19:05
This will work with webpack and vue-cli. That's what CodeSandbox uses. Do you mean you want to use jQuery as a module versus importing in index.html? — Matt Oestreich, Apr 19 '19 at 19:07
Yes, I want to import jQuery and jQuery ui using webpack. Below is what I have tried, but it fails on loading jQuery ui images. I have tried to add alias, that didn't worked and tried copy pasting the images folder manually too, but no luck. Can't paste here, updating in main question. — Chetan Sachdev, Apr 19 '19 at 19:35
I tried https://codesandbox.io/s/o96mp85m86?fontsize=14 link, and I can't see timepicker working. — Chetan Sachdev, Apr 19 '19 at 19:40
Try again.. I was testing using as modules but have reverted changes. It is working now. — Matt Oestreich, Apr 19 '19 at 19:49
@ChetanSachdev you can do this, but it is rather convoluted. It's easiest to import them via CDN (in index.html).. [Use jQuery via NPM in vue-cli](https://stackoverflow.com/questions/53355086/add-jquery-to-vue-cli-3) and how to [use jQuery UI as a module](https://stackoverflow.com/questions/33998262/jquery-ui-and-webpack-how-to-manage-it-into-module) - note: you have to extend the vue-cli webpack config via [vue.config.js](https://cli.vuejs.org/config/#global-cli-config).. Overall, just easier to use jQuery via CDN (although, you don't even need jQuery when using Vue.. kind of an anti-pattern) — Matt Oestreich, Apr 19 '19 at 19:56
yes, that's exactly what I am trying to achieve. Don't want manual script and link tags in html file. I don't have any html file now. — Chetan Sachdev, Apr 19 '19 at 21:08
@ChetanSachdev I went ahead and wrote a demo for you. Please see my updated answer - provides a demo site, as well as the GitHub repo that I am storing the source code at. — Matt Oestreich, Apr 19 '19 at 22:30

Using jquery ui and time picker with vue

1 Answers1