Vuejs add multiple lines to a template? Vuejs add multiple lines to a template? vue.js vue.js

Vuejs add multiple lines to a template?


You can use template literals to surround your template string. This would allow you to write multiple lines of HTML in your template property.

You can read more of this in Mozilla's Javascript reference on Template literals.

Vue.component('footer-component', {    template: `      <div id='footer'>        Footer Stuff      </div>`})new Vue({    el: 'footer'})

I am also looking that you want to reference the element 'footer' in your Vue object, maybe you should try to reference another element. In this case, the element you want to be the father of your footer-component.


Here is an interesting article that describes several (7) methods of defining vue component templates:

7 Ways To Define A Component Template in Vue.js

It includes the above mentioned method of using template literals, but lists also other options of dealing with multi line templates like x-templates, inline templates, single file components, and even JSX.

I'm not the author of said article (it's Anthony Gore), but new to vue and had the same question about multiline templates as well.