CODEWITHSUNDEEP
javascriptintellij-ideavue.jswebstorm
Jerred Shepherd
Jerred Shepherd

Reputation: 560

IntelliJ doesn't allow newlines with Vue.js component templates

I'm using IntelliJ IDEA with Vue.js, and I'm having a slight issue when it comes to defining component templates. Simply put, IntelliJ won't let them be longer than one line without trying to concatenate then

Example

Vue.component('app-button', {
    template: '<div class="button-container"><div class="button-outer"><div class="button-inner"></div></div></div>'
});

And when I try to space it out so one HTML tag is on each line..

Vue.component('app-button', {
    template: '<div class="button-container">' +
    '<div class="button-outer">' +
    '<div class="button-inner">' +
    '</div>' +
    '</div>' +
    '</div>'
});

This make it difficult to define templates to say the least. Is there a way to make IntelliJ work better with these strings? If not, can I define them in a separate file or something?

Upvotes: 1

Views: 199

Answers (1)

Potray
Potray

Reputation: 1998

Use ES6 templates (http://es6-features.org/#StringInterpolation), like this:

Vue.component('app-button', {
    template: `<div class="button-container"><div class="button-outer"><div class="button-inner"></div></div></div>`
});

Upvotes: 1

Related Questions