Vuejs add multiple lines to a template?

Question

I would like to know how best to arrange new lines when constructing a Vuejs template. The code I have as is does not work, as it breaks the JavaScript container. Vue.js wants me to put the entire html in one line, which is somewhat impractical when I plan on adding footer content.

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

new Vue({
    el: 'footer'
})

I've been trying to find examples of HTML templating with Vue, but I have trouble finding them. When using React I am able to code my HTML over multiple lines. How might I do the same for Vuejs?

Answer 1

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.

Answer 2

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.