Vue.js – Using external scripts instead of imported scripts

I am trying to mitigate the Vue scripts that are imported and import them in the CSHTML page instead.

Imagine, I have this in a Vue page:

import { Line } from 'vue-chartjs'

I want to import the script to be in the head of the CSHTML like this:
<script src="URL/vue-chartjs">

Is there any way of doing this?

I tried to keep it as simple as possible for you guys to understand because there isn’t there much to it, it is just this, I want to load the scripts in the HTML page and not in the Vue page.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Most (if not all) Vue packages provide a browser version in their Getting Started section.

Importing the script in your browser will create a constant in global scope (a.k.a. window object) that you can use instead of import.
In the case of vue-chartjs, the global constant is named VueChartJs.

Instead of import { Line } from 'vue-chartjs' you can use VueChartJs.Line directly. Following the provided documentation, I created the following example:

Vue.component('bar-chart', {
  extends: VueChartJs.Bar,
  props: {
    chartdata: {
      type: Object,
      default: null
    },
    options: {
      type: Object,
      default: null
    }
  },
  mounted() {
    this.renderChart(this.chartdata, this.options)
  }
})

new Vue({
  el: '#app',
  data: () => ({
    chartData: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }]
    },
    chartOptions: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }
  })
})
body { margin: 0; }
#app > div { height: 100vh }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://unpkg.com/vue-chartjs/dist/vue-chartjs.min.js"></script>
<div id="app">
  <bar-chart :chartdata="chartData" :options="chartOptions" />
</div>

Method 2

Okay, so based on the comment of Tao, I adapted my code and came up with a solution that worked for me!

So I used VueChartJs.Line directly and then used the scripts in the Cshtml page.
(I didn’t used the Chart in the example, I had my own Chart, I just changed a line of code to use it directly).

I have 2 warnings to give you guys.

Make sure that the scripts that you put load first than the generated webpack bundle(or your bundle), otherwise it will give you an error that you have Vue.js or Charts.Js missing(or any other library that you are using)

Then, be careful about the version of the scripts that you use, they need to be the same as the version of the Vue charts that you are using. I was getting an error where my chart lines would disappear, they would load then disappear right immediately.
I figured that it was the version of the scripts that were loaded were different of my Vue Charts in the Package.json.

Thanks for the help Tao and I hope that this thread helps someone that is in the same situation that I was!


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x