Vue.js 试图让剑道UI包装器在Nuxt中工作

这里有一个获取Nuxt的基本教程： . 我喜欢Nuxt提供的所有东西；结构等

下一步是从这里安装剑道：

npm安装--保存@progress/kendo用户界面 npm安装--保存@progress/kendo主题默认值 npm安装--保存@progress/kendo-dateinputs vue包装器

我已尝试将这些步骤放入index.vue页面

（从底部删除样式只是为了减少代码）

---

我做错了什么？

Kendo for Vue不支持服务器端渲染和Nuxt，因为它需要窗口对象。

Kendo for Vue不支持服务器端渲染，但您可以创建一个插件，然后在Nuxt.config.js文件中，必须以客户端模式添加它

参见示例

/插件/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'
}],

---

这对我来说很有用

我的猜测是，你不能将剑道ui与SSRvuetify一起使用，这将是一个很好的选择，可以与SSR和NUXT一起使用。这对我很有用，使用我页面中的插件：import{Gantt}from'@progress/kendo Gantt vue wrapper'components:{Gantt'：Gantt}，

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)

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