Prismic images don't load in vue site and create runtime/compiler error - image

Question

I integrated the prismic.io headless cms into my vuetify project and have been able to render content from key text fields I created in my prismic repository into the project, but I haven't been able to load images. When I view the page in a browser I get the following console error:
[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
--->
at /Users/jbdebiasio/dev/prismic-vue/src/components/Image.vue
When I view the image with inspect element it shows the following markup:
<!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }-->
What does this mean and what do I need to do to render images properly? I tried updating my app instance but observed no changes.

Answer 1

My company recently ran into the same issue, and it's because of the way the Prismic Vue package is built.
It's caused by Prismic not using render functions, and instead requires the template compiler to build their components at runtime.
You're going to need to add the full build of Vue, which includes the template compiler
The following example works if the project was made with the Vue CLI
// vue.config.js
module.exports = {
// Will merge all properties with the default web pack config
configureWebpack: {
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
}
}
}
}
More info on this here
Vue CLI config here here
This solution is obviously just a bandaid, and the real problem needs to be addressed by Prismic. See this pull request.