Vue.js component specific delimiters with Django and Vue-loader

I am creating a Django + Vue.js v3 app, and found it very useful to use vue3-sfc-loader, as I can use Django to render .vue files easily, and get the best of both worlds. This setup works and Django successfully renders the .vue file, which are then picked up by vue3-sfc-loader, but the issue is that I cannot change the Vue delimiters, neither on Component level, nor on global level.

One solution that works, but is quite inconvenient, is to use the Django {% verbatim %}.

I also tried to use Vue global mixins to set delimiters, with no success, although I am not sure if I used then correctly in my context.

Any way to set the Vue delimiters, either globally or on component level, in this context?

index.html:

<!DOCTYPE html>
<html>
<body>
  <div id="app"></div>
  <script src="https://unpkg.com/vue@next"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader"></script>
  <script>


    const options = {
      
      moduleCache: {
        vue: Vue,
      },
      
      getFile(url) {
        return fetch(url).then(response => {
          if (response.ok) {
            return response.text()
          } else {Promise.reject(response)}
        }  );
      },
      
      addStyle(styleStr) {
        const style = document.createElement('style');
        style.textContent = styleStr;
        const ref = document.head.getElementsByTagName('style')[0] || null;
        document.head.insertBefore(style, ref);
      },
      
      log(type, ...args) {
        console.log(type, ...args);
      }
    }
    
    const { loadModule, version } = window["vue3-sfc-loader"];


    const app = Vue.createApp({
      components: {
        'my-component': Vue.defineAsyncComponent(() => loadModule('./myComponent.vue', options)),
      },
      template: `Hello <my-component></my-component>`,
    });

    app.mixin({ delimiters: ['[[',']]'] }); // this was expected to set the global delimiters

    
    app.mount('#app');
  </script>
</body>
</html>

myComponent.vue:

<template>
  <span class="example">[[msg]]</span>
</template>
<!-- this works: <span class="example">{% verbatim %}{{ msg }}{% endverbatim %}</span> -->

<script>
  export default {
    data () {
      return {
        msg: 'test!',  // I can inject a value from django backend here with '{{ msg }}'
        color: 'blue', // I can inject a value from django backend here with '{{ color }}'
      }
    }
  }
</script>

<style scoped>
  .example {
    color: v-bind('color');
  }
  
  {% include "morestyle.css" %}
</style>

urls.py:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.base_component),
    path('myComponent.vue', views.specific_component),
]

views.py:

from django.shortcuts import render


def base_component(request):
    return render(request, 'vuetest/index.html')


def specific_component(request):
    color = 'blue'
    msg = 'mesage fom backend'
    return render(request,
                  'vuetest/components/myComponent.vue',
                  context={'color': color,
                           'msg': msg})

Answer

For anyone interested. The issue is resolved in version 0.2.22 of vue3-sfc-loader see discussion and reference.

Advertisement

Answer