Vue-cli: Why does vue init remove {{mydata}} from my template fork?

[valnub]

I created a fork of the webpack-simple template.

In this template I defined the following vue single file component:

page1.vue

<template lang="jade">
  f7-page(hide-bars-on-scroll='')
    f7-navbar(back-link='Back', title='Page 1', sliding='')
    f7-block This is page 1.
      br
      | Data-binding {{mydata}}!
      p.red This text is 
       span red
      p.cursive This is 
        span cursive
</template>

<script>
export default {
  name: 'page1',
  data () {
    return {
      mydata: 'works'
    }
  }
}
</script>

<style lang="sass?indentedSyntax">
  .red
    span
      color: red

  .cursive
    span
      font-style: italic
</style>

As you can see, I have bound the string "works" to {{mydata}}.

However, if I download the template via vue cli like this...

vue init valnub/vue-framework7-webpack-template temptest
cd temptest
npm install
npm run dev

... then the following line:

| Data-binding {{mydata}}!

has changed to this:

| Data-binding !

What's going on? How is it possible, that {{mydata}} exists in the template but after using vue cli it's gone?

[LinusBorg]

Because we use handlebars to parse all files and change the content according to the user's choices during template init, and the handlebars parser uses {{}} for its template strings as well.

You can make handlebars skip your Vue-related braces by prepending a backslash, like we did here I the original template's Hello.vue component:

https://github.com/vuejs-templates/webpack/blob/master/template/src/components/Hello.vue#L3

[valnub]

Thanks!

[bachi76]

@LinusBorg maybe I've got this wrong.. does this mean I have to prepend ALL vue {{}}s, just to get the vue-cli template feature to work? This seems rather unreasonable for a vue project I want to turn into a template? The other way around, prepending the few strings that the vue-cli template should render would be much easier - or better even use a syntax not clashing with vue template markers itself. Any help appreciated.

[LinusBorg]

does this mean I have to prepend ALL vue {{ }}s, just to get the vue-cli template feature to work? This seems rather unreasonable for a vue project I want to turn into a template?

Pretty much, unless you don't have to use vue-cli's {{ }}, then you can skip Interpolation with this option, but that's limited to a glob pattern.

This seems rather unreasonable for a vue project I want to turn into a template?

Well, it was a design decision back in the early days to use handlebars, which use {{ }}, and since templates `usually don't contain many .vue files (they are more about the project boilerplate in out mind at least), that didn't seem to be a big issue at the time.

The other way around, prepending the few strings that the vue-cli template should render would be much easier - or better even use a syntax not clashing with vue template markers itself. Any help appreciated.

That would require to add an option in vue-cli to customize the handlebars delimiters - unfortunately, that it not that easy as handlebars itself doesn't support that.

So we would have to find a replacement for handlebars that allows to change delimters while being backwards-compatible for existing templates using handlebars.

You can open a feature request for this and we'll see how to solve this.

[bachi76]

@LinusBorg Thanks for the explanation, seems there's no easy solution indeed. In my scenario the template would already consist of quite a bit of base functionality (an IoT basic app with all the underlying basics like connection, communication, log and its views). The vue-cli template feature would be perfect for this case, if I could get around the handlebars collision problem.

[LinusBorg]

our member egoist has made a tool similar to vue-cli, but also a bit more flexible, and it's using EJS instead of handlebars (<% %>):

https://github.com/egoist/sao

That would mean your users have to install another CLI tool, but it works very similar and would get your going.

[bachi76]

Thanks a lot @LinusBorg, SAO indeed solves my immediate problem. Already created #546 though, feel free to close it (though the change still might be considerable given the probs it would solve :-).