2

I'm a newbie to both these frameworks and the first thing I found is a conflict. So because the double curly brackets are reserved by Tornado, I changed the Vue's default ones to single ones:

      new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
    message: 'Hello Vue.js!'
  }

Template:

<td>${ message }</td>

But now it's just not rendered, what I see in a browser is:

${ message }

How to solve this conflict? Am I doing something wrong? Thanks!

UPD I figured it out. I did several things wrong: 1) I put the script at the "head" section instead of the very end. 2) I didn't add id="app" attribute to some parent element to specify the app object. After I changed the code everything started working.

2
  • If you don't really need Tornado's server side rendering feature, you can just serve the template without rendering and do your stuff in Vue.
    – xyres
    Aug 8, 2018 at 8:08
  • @xyres, I need both - client and server side rendering. I can't believe that nobody encountered this problem :(
    – mimic
    Aug 8, 2018 at 17:28

2 Answers 2

5

Another way to combine Tornado with another template system that uses double-braces is to escape the ones that are to be handled by javascript with {{!:

<h1>This variable comes from Tornado: {{ x }}</h1>
<p>This one comes from Vue: {{! y }}</p>

Tornado's rendering will remove the exclamation point and leave the double braces for Vue to use.

1
  • While this works, IDE (e.g. JetBrains PyCharm) will indicate the error "Id or literal expected". Is there a way to resolve this?
    – Vin Lim
    Jun 26 at 7:02
1

I encountered that as well. This is what worked for me.

Put this in your main.js. N.B you can specify the delimiters to suit your needs

Vue.mixin({ delimiters: ['[[',']]'] })

The in your html you can use it as it is. e.g

<td>[[ message ]]</td>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.