ReferenceError: $ is not defined

[Jakobud]

Trying out this component for the first time. I'm new to Vue so maybe I'm doing something wrong. Here is the error I'm getting in the console:

ReferenceError: $ is not defined
    at o.mounted (min.js:1)
    at _t (vue:6)
    at Object.insert (vue:6)
    at A (vue:6)
    at hn.__patch__ (vue:6)
    at hn._update (vue:6)
    at hn.<anonymous> (vue:6)
    at St.get (vue:6)
    at new St (vue:6)
    at hn.$mount (vue:6)

It's difficult to debug this because you only have minified files on the CDN..... Maybe put some non-minimized CSS and JS files on there too?

Anyways, I'm using Vue.js in Google App Script interface. There is no client-side webpack building being done. So I'm loading VUE and this Datatable components (JS and CSS) via CDN and then doing everything in client-side JS. Here is my template file:

var home = {
  name: 'home',
  template: `
    <div class="col">

      <div class="row">
        <div class="col">
          <h2>Dashboard</h2>
        </div>
      </div>

      <datatable v-bind="$data" />

    </div>`,
  data: function() {
    return {
      columns: [
        { title: 'User ID', field: 'uid', sortable: true },
        { title: 'Username', field: 'name' },
        { title: 'Age', field: 'age', sortable: true },
        { title: 'Email', field: 'email' },
        { title: 'Country', field: 'country' }
      ],
      data: [], // no data
      total: 0,
      query: {}
    }
  }
  ........

As you can see I'm attempting to use the datatable component in a very very simple way. I'm not even trying to load in data. Just trying to get it to display. But I get this $ error. No clue what I can do to troubleshoot this (seems like a common theme with Vue components in my experience so far).

[Jakobud]

Oh I just realized that jQuery is a requirement of this component. That fixed it.