Not working properly with NUXT

[mapimagdich]

Hello, finally I got it working with NUXT but theres a problem if I reload the page OR I access the subpage with the chart directly. Then the whole application crashes and I get error 'define is not defined'. I run nuxt in universal mode:

plugins/vue-morris.js

import Raphael from 'raphael/raphael'
import jQuery from 'jquery'

// This is needed by Morris
global.Raphael = Raphael
global.jQuery = jQuery

nuxt-config.js

..
  plugins: [
    { src: '~/plugins/vue-morris', mode: 'client'}
  ],
..

chartSection.vue

<template>
<line-chart>....</line-chart>
</template>

<script>
import { LineChart } from 'vue-morris'
import axios from "axios"

export default {
  data() {
    return {
      ....
    };
  },
  components: {
    LineChart
  }
..

I already found these links, but could not get it work https://nuxtjs.org/guide/plugins#only-for-browsers https://nuxtjs.org/faq/window-document-undefined/ https://github.com/nuxt/nuxt.js/issues/30

Thank you for your help!

[bbonnin]

Hi, I have written a short article about that integration: https://medium.com/@brunobonnin/building-a-simple-app-with-nuxt-and-morris-js-for-displaying-chart-b6b33b14ffff

Maybe it could help you. Let me know.

[mapimagdich]

Hi, I have written a short article about that integration: https://medium.com/@brunobonnin/building-a-simple-app-with-nuxt-and-morris-js-for-displaying-chart-b6b33b14ffff

Maybe it could help you. Let me know.

Thank your for your reply. I followed your tutorial from the beginning (it was the only article about nuxtjs and morrisjs in the internet ;) ) and the error came up.