Is it possible to use Kendo Vue with the ESM runtime-only library (i.e. vue.runtime.esm.js)?
I get the following error when trying to use the grid:
vue.runtime.esm.js:588 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
found in
---> <KendoGrid>
<Root>
I've read the thread "kendopanelbar causing You are using the runtime-only build of Vue " (https://www.telerik.com/forums/kendopanelbar-causing-you-are-using-the-runtime-only-build-of-vue). But, the solution suggested is to use vue.js (the full library).
5 Answers, 1 is accepted
Yes, you should be able to successfully use the Vue module build with Kendo UI for Vue.
Concerning the displayed error, this is caused by the template parsing changes, which are described in this GitHub issue. To fix it, you could try adding the following to the WebPack config:
resolve: {
alias: {
vue: 'vue/dist/vue.js'
}
}
Alternatively, make sure that all your components are defined in *.vue files, because they are pre-compiled.
Regards,
Dimitar
Progress Telerik
Thank you for your reply Dimitar. If I use the vue alias and reference "vue/dist/vue.js" as you described I would be using the full library and not the runtime-only build. I'm trying to avoid using the full library.
I've tried referencing the Kendo Grid using Vue render functions and Vue Single File Components (SFC) (.vue files) but both fail. The error I get when using a SFC is:
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
found in
---> <KendoGrid>
<SingleFileComponentWrapper> at src\SingleFileComponentWrapper.vue
<Root>
If I exclude the Kendo Grid the SFC runs without error using the runtime-only build.
Excuse me for misleading you with my previous reply.
If you are using WebPack 2 as a module loader, then you could add the following alias to the webpack.config:
module.exports = {
// ...
resolve: {
alias: {
'vue$'
:
'vue/dist/vue.esm.js'
// 'vue/dist/vue.common.js' for webpack 1
}
}
}
Alternatively, if you are using templates and runtime-only build with vue-cli 3.0.0, a vue.config.js file should be created in the project's root and the following content should be added to the file:
module.exports = {
configureWebpack: {
resolve: {
alias: {
'vue$'
:
'vue/dist/vue.esm.js'
}
}
}
}
Regards,
Dimitar
Progress Telerik
Yes, you are indeed correct that the vue.esm.js loads the full library and I apologize for the confusion on my end.
After further investigation, I can confirm that the Kendo UI components rely on the template compiler internally, thus it is required in the build setup.
Regards,
Dimitar
Progress Telerik