I cant see the exporting button using <script setup> tag in nuxt3

[ninettyone]

I cant see the exporting button using <script setup> tag in nuxt3, im not able to see this button, i can see it if i remove the setup atribute, but the next thing that fails is the chart data. Is this module updated to support composition API? I see the example BasicChart.vue is using Options API.

[richardeschloss]

Can you please share config and code snippets?

[ninettyone]

Sure, here is the nuxt.config.js and a component

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/tailwindcss',
    ['nuxt-highcharts', { 
      exporting: true,
      setOptions: {
        colors: ['#0d233a','#E5004D', '#9ED4D5','#e9c46a','#006d77'],
        plotOptions: {
          series: {
            stacking: 'normal',
            dataLabels: {
              enabled: true,
            }
          },
        },
        credits: {
          enabled: false,
        },
        chart: {
          renderTo: 'container',
          type: 'column',
          height: (9 / 15 * 100) + '%' // 16:9 ratio
        },
        yAxis: [{},{}],
      },
    }],
  ],
  highcharts: {
    exporting: true
  },
  css: ['@/assets/styles/styles.css']
})

<template lang="pug">
highchart(:options="chartOptions" :modules="['exporting']")
</template>
<script setup>
    const [weeks,series] = useMapperGeneral()
    const chartOptions = reactive({
        title: {
            text: 'General'
        },
        xAxis: {
            categories: weeks,
        },
        series: series,
        exporting: true,
        plotOptions: {
            series: {
                stacking: 'normal'
            },
            spline: {
                stacking: undefined
            }
        },
        yAxis: {
            title: {
            text: ''
            },
            stackLabels: {
            enabled: true,
            }
        },
    });
    
</script>

[richardeschloss]

Here's a greatly simplified version that shows a working exporting button:

BasicComposition.vue (in branch: feat/composition-api)

<template>
  <div>
    <label>Basic composition</label>
    <highchart :options="chartOptions" :modules="['exporting']"/>
  </div>
</template>

<script setup>
const chartOptions = reactive({
  title: {
    text: 'Some Text'
  },
  series: [{
    data: [[0, 0], [1, 1]]
  }]  
});

</script>

<style lang="scss" scoped>

</style>

Result:

[richardeschloss]

I couldn't get it working with pug. I don't have the tooling set up for that. Can you switch over to html?