VueJS with HAML/Jade/Pug-like templating

Question

I'm using both Vue.js and HAML in my current project. The templates are parsed by HAML, converted into HTML, then parsed by Vue. For instance:

#pagecontent.nonscrolling
    %h2 Demand forecasts
    %label{ for:"location-type" } Select location type
    %select.form-control#location-type{ v-model:"locationType" }
        %option{ v-bind:value:"'foo'" } Foo

It works ok, but it's a bit disconcerting worrying whether all the Vue syntax will make it unscathed through the HAML parser.

But I really like this type of succinct, angle-bracket-less template.

Is there is a cleaner way to achieve this? Some add-on to Vue that supports something similar?

Answer 1

Don't worry to much. There is nothing wrong about using preprocessors. I mean vue depends on wepback where everything is being preprocessed in one way or an other. Out of the box you can use pug with vue so I put more trust in it. It works fine for me without any unexpected problems. Both have the nesting through indentation in common and this is something that starts to be confusing with longer source codes. So I use pug mainly in short components and nest them using named slots into bigger ones.

Your code - pug version (as far I can guess what this HAML code should do)

<template lang="pug">
#pagecontent.nonscrolling
    h2 Demand forecasts
    label(for="location-type") Select location type
    select.form-control#location-type(v-model="locationType") 
        option(v-bind:value="foo") Foo
</template>

The whole Vuetifyjs website is made with pug: Vuetifyjs.com Source Code