Error with Vue-CLI Component : You are using the runtime-only build of Vue where the template compiler is not available

4
votes

New to VueJS and was going through the tutorial. Here are the steps i did

  • Created Project using VUE CLI

  • Tried to Create a component with this code.

     var data = {
    items: [{ text: 'Bananas', checked: true },
        { text: 'Apples', checked: false }
        ],
    title: 'My Shopping List',
    newItem: ''
        }; 

Vue.component('items-component', {
    data: function () {
        return data;
    },
    template: `
<div class="blog-post">
  <span>sample</span>
</div>
`
});

  • Added this to App.vue template part.

      <items-component></items-component>

However i am getting this 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.

Questions

  • Is there a way we can create multiple components in a Vue Cli Project in one file or multiple files are the only way to create the components?.

  • is manual editing webpack with CLI a good option?. If so, are there any good links for the same.

Please let me know

1
vue.jsvuejs2vue-componentvue-loader

1 Answers

2
votes

I also had the same error on my project. I solved it by:

  1. creating a new file: vue.config.js

  2. and added: 

    module.exports = {
  runtimeCompiler: true
}

Regarding your question, I'll try to answer even though I might not give the best answer:

Is there a way we can create multiple components in a Vue Cli Project in one file or multiple files are the only way to create the components?

People always create multiple files for components.

I hope this helps