Issues using with Quasar Framework

[virtualvinodh]

Hi,

I am trying to use vue-konva within the Quasar framework. However, for some reason, the canvas is not being rendered and I get the following error.

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

---> <VLayer>

I am totally new to vuejs. Am I doing something completely wrong?

V

[Ldoppea]

Hi,

I just got the same problem. This message is a warning (not an error) but vue-konva is not rendering.

This seems to be a side-effect of the last vue-cli release as vue-konva works well with a project generated with vue-cli v2.9.0 but not with vue-cli v3.0.0-alpha.4.

[rafaesc]

Hi,

try to add this alias in your webpack config

vuejs-templates/webpack#215 (comment)

[Ldoppea]

The problem is that webpack is now managed by vue-cli and is hidden from project. I did not find any information on how to override it or how to eject it from the cli. The official documentation still refers to v2.9.0 cli.
Maybe it is to early to use the v3.0.0 alpha.

Virtualvinodh, are you using v3 or v2.9?

[virtualvinodh]

Actually, I'm not using vue-cli. I'm using the cli from the framework.

https://www.npmjs.com/package/quasar-cli

I think it internally uses webpack (similar to vue-cli) to perform the compilation.

V

[rafaesc]

Hi @virtualvinodh,

I saw that in the path of library generated by quasar-cli, there is the webpack config where you have to add the alias
[quasar-project]/build/webpack.base.config.js
Like this
https://github.com/rafaesc/vue-konva/blob/master/build/webpack.base.conf.js#L27

On the other hand, @Ldoppea, you right, vue-cli v3.0.0 alpha doesn't expose the webpack config.

vuejs/vue-cli#747

[Ldoppea]

Thanks for investigation, I hope they'll release the documentation soon.

[Ldoppea]

They posted the documentation on their README.md.

To make it work, a vue.config.js should be created on the project's root, with the following content :

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.js'
      }
    }
  },
  lintOnSave: true
}

Also the vue entry in package.json should be removed and its content must be added in vue.config.js next to configureWebpack (ex: lintOnSave).

This will be the procedure for all Vue-CLI 3.0 generated projects, so it would be useful to add a note in your README.md

[husayt]

@rafaesc , what is advised above is essentially a workaround. Proper solution should be applied to vue-konva. This lib should configure it's own dist files down to render function i.e. should pre-compile templates when releasing dists.

Here is the advice in regards to the similar issue with different component.

nuxt/nuxt#1142

[MKRazz]

This should fix it #13

[rafaesc]

@MKRazz PR merged on 1.0.6 version