[Vuejs]-Getting Vega-Lite / D3 to Work in Nuxt.js

by

0👍

In your failing example, you are passing a JavaScript object (this.chart1) into JSON.parse, which expects a string. Did you see any hints in the javascript error console?

Perhaps it would work if you simply called await vegaEmbed('#vis', this.chart1);

Additionally, it doesn’t look like your draw method gets called anywhere. You may want to put that code inside of something like the mounted life-cycle hook, so that the vega-embed code runs once the component has been rendered.

0👍

It works like this in Nuxt with SSR set to false.

<template>
    <div id="vis"></div>
</template>

<script>
import embed from 'vega-embed'

export default {
    name: 'BarChart',
    mounted() {
        this.draw()
    },
    data() {
        return {
            chart1: {
                $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
                description: 'A simple bar chart with embedded data.',
                data: {
                    values: [
                        { a: 'A', b: 28 },
                        { a: 'B', b: 55 },
                        { a: 'C', b: 43 },
                        { a: 'D', b: 91 },
                        { a: 'E', b: 81 },
                        { a: 'F', b: 53 },
                        { a: 'G', b: 19 },
                        { a: 'H', b: 87 },
                        { a: 'I', b: 52 },
                    ],
                },
                mark: 'bar',
                encoding: {
                    x: { field: 'a', type: 'nominal', axis: { labelAngle: 0 } },
                    y: { field: 'b', type: 'quantitative' },
                },
            },
        }
    },
    methods: {
        async draw() {
            const result = await embed('#vis', this.chart1)
        },
    },
}
</script>

Yet, when SSR is set to true, it returns:

SyntaxError
Unexpected token '??='

Leave a comment