Добавление ванильной js-библиотеки в Nuxt - PullRequest
Новая
       22

Добавление ванильной js-библиотеки в Nuxt

0 голосов
/ 11 октября 2018

Я пытаюсь добавить библиотеку 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.

Но есть и другая проблема - диаграмма не отображается должным образом: enter image description here

Я думаю, это связано с отсутствием связанных стилей CSS.

Буду признателен за любые советы:
- как правильно включить Chartist (или любую другую библиотеку vanilla js)
- как прикрепить css, связанный с библиотекой js

ps Я знаю, что есть разныекомпоненты диаграммы, но я хочу понять, как работать с библиотеками vanilla js в nuxt.

1 Ответ

0 голосов
/ 12 октября 2018

Вот ниже единственный рабочий вариант, который нашел на данный момент: 

<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>
...