Conflict on Template of Twig and Vue.js

I'm doing a program using Slim 2 that uses Twig as my templating engine. so It uses the syntax {{ foo }} in php file. On the other hand, I'm using vue.js, it also uses {{ bar }}.

E.g.

I'm gonna do the two way binding, below is my html code.

<div class="container">
    Label Value: <label>{{ foo }}</label><br>
    Field Value: <input v-model="foo">
</div>

and here is my vue js code.

new Vue({

    el: '.container',
    data: {
        foo: 'Hello world.'
    }
});

So the Hello world should be in the Label Value.

The output is the image below.

Which it did not worked, probably the system thought it's a twig variable. So I checked by passing variable in a view.

$app->get('/', function() use ($app) {
    $app->render('login.php', [
        'foo' => 'FROM PHP FILE'
    ]);
})->name('login');

So I checked, the Label Value: shows the variable that I passed from the PHP file not on the VUE code.

Kind of hard to explain but you get the point. Was wondering how to bypass twig's template and use the {{ }} from vue also.

Just change default delimiters for vue. Here's how:

Vue.js 1.0

Define delimiters globally.

Vue.config.delimiters = ['${', '}']

Docs


Vue.js 2.0

Define delimiter on per component basis.

new Vue({
    delimiters: ['${', '}']
})

Docs

[100% Working Code], Here, we can modify vue.js tag indicator or else utilize twig verbatim tag, it marks a segment as raw text that must not be estimated by twig  Conflict on Template of Twig and Vue.js - Wikitechy. HOT QUESTIONS. What is difference between class and interface in C#; Mongoose.js: Find user by username LIKE value

Using Vue.js template delimiters in twig, When using Vue.js and rendering templates in twig you're running into the issue that both use the same delimiter. Luckily you can define the  Teams. Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

I read in another similar question to do:

{{"{{vue.js variable here}}"}} 

to make it shorter. It works in SOME cases for me. But, thought you might like to see it anyway...

I didn't yet succeed to get it to work in all areas of my code.

[SOLVED] Conflict on Template of Twig and Vue.js, Just change default delimiters for vue. Here's how: Vue.js 1.0. Define delimiters globally. Vue.config.delimiters = ['${', '}']. Docs. Vue.js 2.0. Directly injecting data to Vue apps with Symfony/Twig Usually data for Vue apps come from APIs, but ocassionally it may happen that you're rendering a Twig template with all the data you need and which you want to pass to your Vue app - without implementing an additional API.

For Vue JS 2 (not sure about 1). You can use:

<span v-text="msg"></span>
<!-- same as -->
<span>{{msg}}</span>

As per documentation: https://vuejs.org/v2/api/#v-text

Directly injecting data to Vue apps with Symfony/Twig, How to include Vue applications into your Twig templates and directly passing data from your Symfony application to it. I'm using Vue.js at my Symfony 3.4 project. I have a problem with seting my background-image from object via Vue.js. I'm looping through my elements via Vue and just inserting some data from object. Everything is fine instead of the image.

Just a heads up. On Vue JS 2. The way of doing this is add an object to Vue.

new Vue({
    el: '#app',
    delimiters: ['${', '}'],
}

Twig, Vue and Server Side Rendering: How It Went Sideways , How to implement server side rendering with a Twig legacy ? It is a widely spread Vue.js framework that makes server side rendering really easy. getElementById("app-container"); // Insert global __TEMPLATE__ variable to of the website, there was a tremendous amount of conflicts we needed to fix. JS implementation of the Twig Templating Language. Contribute to twigjs/twig.js development by creating an account on GitHub.

Conflict on Template of Twig and Vue.js, I'm doing a program using Slim 2 that uses Twig as my templating engine. so It uses the syntax {{ foo }} in php file. On the other hand, I'm using vue.js, it also  Your inline template needs to be defined inside the DOM element to which Vue is attached. However, inline-template makes the scope of your templates harder to reason about. As a best practice, prefer defining templates inside the component using the template option or in a <template> element in a .vue file.

How to compile Twig in a Vue component? Please help :) · Issue , move the TWIG into the Vue template file. However, I cannot quite execute it either way. The problem with 1. is that I am transpiling JS through  Twig and Angular.js use the same symbols to control its rendering structure : {{and }}, which isn't good for those ones that uses Twig as default backend template engine. Although, there may are developers that doesn't has this problem and they'll be thinking : Why use a backend rendering template if you're supposed to do that with angular and

Adding Vue components to old school web apps, Vue is a fantastic tool for single-page applications, but it can be a bindings, and can lead to various compatibility issues and conflicts. Trying to mount multiple instances of Vue based on element #id results in lots of repetitive JS calls and so we would add something like this to our card's Twig template. Template Syntax. Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying Vue instance’s data. All Vue.js templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers. Under the hood, Vue compiles the templates into Virtual DOM render functions.

Comments
  • Ohh! I saw that also but did not bother trying it, instead I tried autoescape and which did not worked. Hahaha. Now I tried that and it worked, I put that verbatim syntax between my vue " {% verbatim %} {{ foo }} {% endverbatim %} and it works! Thanks! :)
  • Hello there, I will try this one and will let you know if this works. :)
  • The previous answer from felipsmartins is better... it works in all cases. The above I sent seems to have limited uses... as far as my tests showed anyway.
  • Lifesaver for short variables and closest analog to laravel blade's @{{ variable }} escape. Mind sharing where exactly your solution didn't work?
  • What was the down voting for? Please comment, when down voting!
  • Now that's nicer. no idea why the downvote but I just made up for that...
  • 'nicer' -> that's very subjective. I don't think that's nicer, obviously you do though...still, it's good you put it in..