0

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.

1 Answers1

0

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.

tony19
  • 125,647
  • 18
  • 229
  • 307
HMilbradt
  • 3,980
  • 16
  • 31
  • Thanks, this seems to be the correct answer but I don't understand what the steps are to get the full version of vue. That webpack example- does that code need to go somewhere in the webpack file? I tried inserting it but nothing happened. –  Jul 22 '19 at 16:41
  • I've updated with a better example. If you're not using Webpack, or didn't use the Vue CLI, that may not work, so you'll have to do some digging on how to resolve the full Vue build in whatever build pipeline you're using – HMilbradt Jul 22 '19 at 19:08