Cambiar los delimitadores en Vuejs 2

En alguna ocasión puede ser necesario cambiar los delimitadores en Vuejs 2, es decir, en lugar de utilizar {{ msg }}, poder utilizar [[ msg ]] o ${ msg }, por ejemplo.

Esto es posible, pero existen algunas limitaciones además de configuraciones previas que debemos aplicar.

Las limitaciones son que en lugar de poder utilizar el Html de la misma forma que lo hacemos siempre con un tag template, ahora deberemos definir la template desde nuestro componente de la siguiente forma:

De esa forma nuestros delimitadores siempre estarán funcionando, pero antes debemos hacer algunas configuraciones.

Configurar Vuejs 2 para utilizar el runtimeCompiler

Para este caso lo único que debemos hacer es crear un archivo vue.config.js en la raíz de nuestro proyecto con el siguiente código y a continuación reiniciar nuestro servidor local.

Ese código será cogido automáticamente por Vuejs y lo utilizará para configurar la forma en la que funcionará el compilador, más información aquí.

Establecer los delimitadores en Vuejs 2

Para que nuestra configuración sea completa, vamos a modificar el archivo main.js por lo siguiente:

Esa es la clave, añadir los delimitadores de esta forma nos permitirá utilizarlos en toda nuestra aplicación, pero recuerda, sólo lo podrás hacer definiendo la template de tu componente, no funcionará ni con un tag template ni con el método render de Vuejs.