Nunjucks: integrating with vue?

[bonesoul]

is there any tutorials / guides around about vue.js integration with nunjucks?

[ArmorDarks]

Are you sure you want to do this? Vue already have its own "kinda" templating with directives.

[bonesoul]

i want to use for client side.

[ArmorDarks]

I understand, but Vue already provides pretty much everything you need for templating, thus you don't need yet another templating language...

But if you really want to do this, you can pass rendered by Nunjucks template directly to Vue, I guess. Didn't try it, but it should be something like this:

1. Setup your Nunjucks environment somewhere, like in nunjucks.js, and export env with export default env

2. In your Vue file just render your template, like this:

   import Vue from 'vue'
   import env from './nunjucks.js'
   
   new Vue({
    el: '#app',
    template: env.render('path/to/your/template')
   })
   

Since env.render returns just a string with HTML, Vue should be able to pick it up.

Once again, didn't test it, but I think you should dig in that direction.

[jgerigmeyer]

Vue claims to allow any templating language that returns HTML, but be warned that the output HTML will need to be a valid Vue template string, complete with {{ and }} around any variables, etc. That is, Vue allows you to use your favorite templating language for its syntax only, but you can't really use any logic in it at all.

This works fine with Vue:

<template lang="nunjucks">
  <p>{% if true %}Hello World!{% endif %}</p>
</template>

But this will not work as you expect, even if your Vue component has data { recipient: "World" }:

<template lang="nunjucks">
  <p>{% if true %}Hello {{ recipient }}!{% endif %}</p>
</template>

The second example will run Nunjucks as a preprocessor without any data, and will simply output <p>Hello !</p> and pass that along to Vue as a static template string.

You _can_ use Nunjucks with Vue, but not if you want your templates to do any logic conditional on the context data.

[BobGneu]

One solution is to use the {% raw %} or {% verbatim %} tags around your vue logic. Nunjucks wont try to parse them.

{% verbatim %}
  <div id="app">
    <img src="https://vuejs.org/images/logo.png" alt="Vue logo">
    <h1>\{{ greeting }}</h1>
    <ul>
      <li>
        To learn more about Vue, visit
        <a :href="docsURL" target="_blank">
          \{{ humanizeURL(docsURL) }}
        </a>
      </li>
      <li>
        For live help with simple questions, check out
        <a :href="gitterURL" target="_blank">
          the Gitter chat
        </a>
      </li>
      <li>
        For more complex questions, post to
        <a :href="forumURL" target="_blank">
          the forum
        </a>
      </li>
    </ul>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        greeting: 'Welcome to your Vue.js app!',
        docsURL: 'http://vuejs.org/guide/',
        gitterURL: 'https://gitter.im/vuejs/vue',
        forumURL: 'http://forum.vuejs.org/'
      },
      methods: {
        humanizeURL: function (url) {
          return url
            .replace(/^https?:\/\//, '')
            .replace(/\/$/, '')
        }
      }
    })
  </script>
{% endverbatim %}

I can confirm that this works on both client and server side implementations of nunjucks with vue on the client side.

[HummerHead87]

You can try to change Vue.js delimeters to something else, other than mustache syntaxis (["{{", "}}"]). Like this https://vuejs.org/v2/api/#delimiters

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

// Delimiters changed to ES6 template string style

[chocolateboy]

Or the delimiters can be changed in nunjucks.

[chocolateboy]

This issue crops up (and has the same solutions) in other frameworks which lay claim to the same delimiters as nunjucks e.g. AngularJS, Angular, and PostHTML plugins such as posthtml-faker.

[fdintino]

I'm open to a PR documenting this, but it sounds like the original question in the issue has been answered.