vuejs / vue-cli

🛠️ webpack-based tooling for Vue.js Development
https://cli.vuejs.org/
MIT License
29.76k stars 6.33k forks source link

Prevent vue-cli templating from colliding with vue's own handlebar {{}} template markers #546

Closed bachi76 closed 6 years ago

bachi76 commented 7 years ago

As suggested by @LinusBorg in https://github.com/vuejs/vue-cli/issues/284#issuecomment-319675420 I'll add this as feature request:

Problem: Currently, we cannot use vue-cli's templating feature with a bit larger template projects that contain many vue files, since both use handlebars and the delimiters collide: vue-cli will remove all vue {{}} tags unless \ is used everywhere, which is not reasonable in a larger template project.

Also, when working on the template project, vue will complain about missing data for the template strings used in vue-cli.

Idea: As with handlebars it's not possible to change the delimiters (https://github.com/wycats/handlebars.js/issues/1184), the only solution seems to be to replace handlebars with e.g. mustache which allows custom delimiters (https://github.com/janl/mustache.js/#custom-delimiters) and works quite similar.

(I'm not sure if this is in scope, but certainly the collisions prevent some nice vue-cli template use-cases, in my case bootstrapping an IoT app which comes already with a basic set of features/vue components).

ggiotopoulos commented 6 years ago

This is a very important feature. I work at a large biotech in Boston. We are attempting to implement Vue as a front end on a number of large single page applications here. We'd like our development team to have a nice default template to start with. Within that template we have some default data between {{}} that's very useful to demonstrate default functionality.

LinusBorg commented 6 years ago

Have you tried the skipInterpolation option?

ggiotopoulos commented 6 years ago

no

DrSensor commented 6 years ago

Using \{{ myData }} also works, although you need to add \ on every Vue handlebars.