How to use JavaScript in a Vue component

Question

I need to put some charts and statistics tables in my Vue components but they are all created with pure JavaScript functions and their context are getting with jQuery methods. I am using ChartJS for my charts. I put the html part in a component Chart.vue but they are all empty now because I am not allowed to use Js in the component.

Here is an example chart code

    var areaChartCanvas = $('#areaChart').get(0).getContext('2d')

    var areaChartData = {
      labels  : ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          label               : 'Digital Goods',
          backgroundColor     : 'rgba(60,141,188,0.9)',
          borderColor         : 'rgba(60,141,188,0.8)',
          pointRadius          : false,
          pointColor          : '#3b8bba',
          pointStrokeColor    : 'rgba(60,141,188,1)',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(60,141,188,1)',
          data                : [28, 48, 40, 19, 86, 27, 90]
        },
        {
          label               : 'Electronics',
          backgroundColor     : 'rgba(210, 214, 222, 1)',
          borderColor         : 'rgba(210, 214, 222, 1)',
          pointRadius         : false,
          pointColor          : 'rgba(210, 214, 222, 1)',
          pointStrokeColor    : '#c1c7d1',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(220,220,220,1)',
          data                : [65, 59, 80, 81, 56, 55, 40]
        },
      ]
    }

    var areaChartOptions = {
      maintainAspectRatio : false,
      responsive : true,
      legend: {
        display: false
      },
      scales: {
        xAxes: [{
          gridLines : {
            display : false,
          }
        }],
        yAxes: [{
          gridLines : {
            display : false,
          }
        }]
      }
    }

    // This will get the first returned node in the jQuery collection.
    var areaChart       = new Chart(areaChartCanvas, { 
      type: 'line',
      data: areaChartData, 
      options: areaChartOptions
    })

And this is the HTML structure of the above chart

            <div class="card card-primary">
              <div class="card-header">
                <h3 class="card-title">Area Chart</h3>

                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
                  </button>
                  <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
                </div>
              </div>
              <div class="card-body">
                <div class="chart">
                  <canvas id="areaChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                </div>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->

I created a component with this html structure with 4 different charts. The look of the component is spot on but again, they are all empty inside because I can't use the above Javascript codes. What do I do? How do I implement the javascript code for the related html structure in a specific component?

I also tried it with a Data Table. In this table there some dynamic features like pagination, ascending descending orders etc. But I am not allowed to see and use them because they work based on javascript files.

There are 3 javascript files which is being used by the Data table and two css files. I added all of them in public/index.html folder and I created a component DataTable.vue

I have the static HTML version of this data table and it's fully functional so I can run some test on it. I need the following scripts in order to use the functionality of the data table

<script>
  $(function () {
    $("#example1").DataTable({
      "responsive": true,
      "autoWidth": false,
    });
    $('#example2').DataTable({
      "paging": true,
      "lengthChange": false,
      "searching": false,
      "ordering": true,
      "info": true,
      "autoWidth": false,
      "responsive": true,
    });
  });
</script>

But I don't know how to implement this scripts in a Vue component. What should I do?

Answer 1

In your Chart.vue file, if you don't have a <script> block yet, add this below your <template> :

<script>
    export default {
        mounted() {
            // Your Chart JS code
        }
    }
</script>