CODEWITHSUNDEEP
vue.jskendo-uinuxt.js
Martin Thompson
Martin Thompson

Reputation: 3755

Trying to get Kendo UI wrappers working in Nuxt

There is a basic tutorial for getting Nuxt going here: https://github.com/nuxt-community/starter-template . I like all the stuff that Nuxt puts in place ; structure etc.

Next is installing the Kendo stuff from here: https://www.telerik.com/kendo-vue-ui/getting-started/

npm install --save @progress/kendo-ui npm install --save @progress/kendo-theme-default npm install --save @progress/kendo-dateinputs-vue-wrapper

I have tried to put the steps into the index.vue page

( have removed the styles from the bottom just to make it less code ) 

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

When I run npm run dev , it compiles but when I open the page I get:

ReferenceError window is not defined node_modules\@progress\kendo-ui\js\kendo.core.js

 });

            return observable;
        };

    })(jQuery, window);

    return window.kendo;

    }, __webpack_require__(3));

what am I doing wrong?

Upvotes: 1

Views: 810

Answers (2)

esteban saravia
esteban saravia

Reputation: 31

Kendo for Vue does not support Server Side Rendering, but you can create a plugin and then in the nuxt.config.js file you must add it in client mode.

see the example.

/plugins/kendoui.js

import Vue from 'vue'
import '@progress/kendo-ui'
import '@progress/kendo-theme-default/dist/all.css'

import {
  KendoGrid,
  KendoGridInstaller,
  KendoGridColumn
} from '@progress/kendo-grid-vue-wrapper'
import {
  KendoDataSource,
  KendoDataSourceInstaller
} from '@progress/kendo-datasource-vue-wrapper'

Vue.use(KendoGridInstaller)
Vue.use(KendoDataSourceInstaller)

nuxt.config.js

plugins: [{
    src: '~/plugins/kendoui.js',
    mode: 'client'
}],

and that's works for me.

Upvotes: 3

Plamen Zdravkov
Plamen Zdravkov

Reputation: 748

Kendo for Vue does not support Server Side Rendering and Nuxt because it needs the window object.

Upvotes: 1

Related Questions