Попытка заставить оболочки Kendo UI работать в Nuxt

Question

Здесь вы найдете базовое руководство по использованию Nuxt: https://github.com/nuxt-community/starter-template. Мне нравятся все вещи, которые ставит Nuxt; структура и т. д.

Далее идет установка Kendo: https://www.telerik.com/kendo-vue-ui/getting-started/

Установка npm --save @ progress / kendo-ui Установка npm --save @ progress / kendo-theme-default npm install --save @ progress / kendo-dateinputs-vue-wrapper

Я попытался поместить шаги на страницу index.vue

(убрал стили снизу только для того, чтобы уменьшить код)

<template>
  <section class="container">
    <div>
      <app-logo/>
      <h1 class="title">
        vtest2
      </h1>
      <h2 class="subtitle">
        Nuxt.js project
      </h2>
      <div class="links">
        <a
          href="https://nuxtjs.org/"
          target="_blank"
          class="button--green">Documentation</a>
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          class="button--grey">GitHub</a>
      </div>
      <kendo-calendar :value="new Date()"></kendo-calendar>
    </div>
  </section>
</template>

<script>
import AppLogo from '~/components/AppLogo.vue'
import '@progress/kendo-ui'
import '@progress/kendo-theme-default/dist/all.css'
import { Calendar } from '@progress/kendo-dateinputs-vue-wrapper'


export default {
  components: {
    AppLogo,
    Calendar
  }
}
</script>

<style>
</style>

Когда я запускаю npm, запускаю dev, он компилируется, но когда я открываю страницу, я получаю:

ReferenceError окно не определено node_modules \ @progress \ kendo-ui \ js \ kendo.core.js

 });

            return observable;
        };

    })(jQuery, window);

    return window.kendo;

    }, __webpack_require__(3));

что я делаю не так?

Answer 1

Kendo for Vue не поддерживает рендеринг на стороне сервера и Nuxt, потому что ему нужен объект окна.