Vue, Server Side Rendering, and Handling Dependencies that Require a Browser Environment

main.js

Vue.component('apexchart', () => {
  // NB: tell webpack to include the dynamic import within
  // the main bundle instead of splitting into other bundles.
  // https://webpack.js.org/api/module-methods/#import-
  return import(
    /* webpackMode: "eager" */
    'vue-apexcharts'
  )
})

my-graph-v1.vue

<template>
  <apexchart .../>
</template>

my-graph-v2.vue

<template>
  <apexchart v-if="mounted" .../>
</template>
<script>
export default {
  data () {
    return {
      mounted: false
    }
  },
  mounted () {
    this.mounted = true
  }
}
</script>