Search code examples
javascripthtmlvue.jsnuxt.jsserver-side-rendering

All-in-one downloadable HTML file including chart.js from nuxt app

My requirement is to provide a small Nuxt app that generate a simple HTML file including some overview sections for services provided to customers of the company I work for. The specific use case here is that the app provides an HTML file that is downloadable and can be opened again in any browser, on or offline with 100% of the functionality.

This works with SSR and Nuxt, however, I'm running into some problems with using chart.js

Current state of the app: Super basic Nuxt app generated via nuxi, three Vue components. One of the components implements chart.js, all of this results in this:

enter image description here

However, when I save the resulting file (mhtml or html), the chart portion doesnt show up. The Chart component is essentially just this:

 methods: {
      renderChart() {
        const ctx = this.$refs.chartCanvas.getContext('2d');
  
        new Chart(ctx, {
          type: 'pie',
          data: {
            labels: ['green', 'red'],
            datasets: [{
              data: [this.green, this.red],
              backgroundColor: ['green', 'red']
            }]
          },
          options: {
            responsive: true,
            maintainAspectRatio: false
          }
        });
      }
    }
  }

which is called in onMounted, and rendered like so:

<template>
    <div>
      <canvas ref="chartCanvas"></canvas>
    </div>
 </template>

I've tried building the app in different ways (static and server targets), but that didn't help.

Is this a problem with lifecycle hooks not being available via SSR? Or a problem with my implementation specifically?

Solution

  • The easier route may be to export the canvas as datauri then use the buffer string as a src on a download button. This way you are just exporting the graph as a png or similar. By the sounds of it you are wanting to make graphs server side then make them available to download and this is the best/ most obvious way to accomplish this.