将Vanilla JS库添加到Nuxt

Question

我正在尝试将Chartist库添加到现有的NuxtJs项目中。 下面是我的配置：

> npm i chartist

〜plugins / chartist.js：

import Chartist from 'chartist'
export default Chartist

nuxt.config.js：

module.exports = {
    plugins: [{src:'~plugins/chartist.js', ssr:false}],
    build: {
        vendor: ['chartist']
    }
}

index.vue：

<template>
  <div>
    <div class="ct-chart"></div>
  </div>
</template>

<script>

import Chartist from 'chartist'

export default {
  mounted(){

    var chart=new Chartist.Line('.ct-chart', {
        labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
        series: [
          [12, 9, 7, 8, 5],
          [2, 1, 3.5, 7, 3],
          [1, 3, 4, 5, 6]
        ]
      }, {
        fullWidth: true,
        chartPadding: {
          right: 40
        }
      });

  }
}
</script>

第一次尝试打开nuxt页面会返回错误：

ReferenceError: window is not defined

页面重新加载后，它总是返回：

Error: render function or template not defined in component: anonymous

但是，如果通过VueRouter从另一个页面打开页面，则不会出现任何错误提示和图表。

但这是另一个问题-图表未按预期显示：

我想这是由于缺少相关的CSS样式。

如果有任何建议，我将不胜感激：
-如何正确包含Chartist（或任何其他Vanilla js库）
-如何附加与js库相关的CSS

p.s。我知道有不同的charter vue组件，但是我想了解如何使用nuxt中的vanilla js库。

Answer 1

以下是目前发现的唯一可行变体：

<script>

import 'chartist/dist/chartist.min.css'

export default {
 data() {
  return {
   chartist: null
  }
 },
 mounted() {

  this.chartist = require('chartist')
  var z = new this.chartist.Line('.ct-chart', {
   labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
   series: [
    [12, 9, 7, 8, 5],
    [2, 1, 3.5, 7, 3],
    [1, 3, 4, 5, 6]
   ]
  }, {
   fullWidth: true,
   chartPadding: {
    right: 40
   }
  });

 }
} 
</script>