search

Home  >  Q&A  >  body text

Nuxt.js: window is not defined apexcharts/vue-apexcharts

I added this simple example from apexcharts.com. Pretty sure the import is correct. I don't reference window anywhere. When adding this file my entire application stops. I believe this has something to do with SSR or Nuxt configuration.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

<template>

  <div id="chart">

    <apexchart

      type="donut"

      width="380"

      :options="chartOptions"

      :series="series"

    ></apexchart>

  </div>

</template>

 

<script>

import VueApexCharts from "vue-apexcharts";

 

export default {

  name: "Donut",

  components: {

    apexchart: VueApexCharts,

  },

  data() {

    return {

      data: {

        series: [44, 55, 41, 17, 15],

        chartOptions: {

          chart: {

            type: "donut",

          },

          responsive: [

            {

              breakpoint: 480,

              options: {

                chart: {

                  width: 200,

                },

                legend: {

                  position: "bottom",

                },

              },

            },

          ],

        },

      },

    };

  },

};

</script>


P粉366946380P粉366946380508 days ago924

reply all(2)I'll reply

  • P粉946437474

    P粉9464374742023-11-10 14:41:58

    Wrap your component in nuxt's <client-only> component. This will prevent SSR/SSG from breaking when trying to reference a non-existent window object.

    For example

    1

    2

    3

    <client-only>

      <chart-component>

    </chart-component></client-only>

    reply
    0
  • P粉834840856

    P粉8348408562023-11-10 09:34:40

    As explained in my linked answer (last sentence, using direct component syntax), here's how to make a correct working setup:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    <template>

      <div id="chart">

        <client-only>

          <apexchart type="donut" width="380" :options="chartOptions" :series="series"></apexchart>

        </client-only>

      </div>

    </template>

     

    sssccc

    I also removed a data which nested the entire configuration, already inside data(). This resulted in a props mismatch, as shown in the browser console error.

    reply
    0
  • Cancelreply