3

I get the following error since I switched from Vue CLI version 2 to 3:

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.

Here's how I instantiate Vue:

new Vue({
  el: '#app',
  store,
  router,
  components: {
    UserStatus
  },
  data: {
    isLoading: true
  }
})

This worked with version 2, why not on version 3?

This answer proposes to import Vue's template compiler via import Vue from 'vue/dist/vue.esm.js';, however this creates issues with Vuetify, and I still don't understand why there's any need to import the template compiler if version 2 didn't need to.

Just in case here's the content of my index.html. Also here's my app's entire codebase.

As a reminder here's the out-of-the-box way of instantiating the main Vue instance, which is inadequate for me because it overrides whatever I manually wrote inside the <div id="app"> element in my index.html, and also involves an App.vue component which I actually don't have or want to have:

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
drake035
  • 3,955
  • 41
  • 119
  • 229

2 Answers2

2

The project seems to be missing quite a few dependencies related to vue cli 3. I forked your repo and brought package.json up to speed with a fresh install as well as aliased the runtime + compiler build of Vue.

Everything compiled and the console was clear of any errors related to compiling templates. The page never loaded, however, which I suspect is due to Firebase credentials missing.

You can find my updated fork here on GitHub. Hope it helps!

Brian Lee
  • 17,904
  • 3
  • 41
  • 52
  • I wish I could upvote you a couple of times. Your repo is such a great starting point, and it got me back into the game after 3 days of pulling hair. Thank you so much. – Johannes Jander Feb 26 '19 at 20:44
1

I also faced this issue and I got it working by creating a vue.config.js file at my project's root directory and wrote the following code in it.

module.exports = {
    runtimeCompiler: true,
};
fullmetal
  • 414
  • 3
  • 11