How to set costum delimiters? #15
-
|
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. Vue.createApp({
// Delimiters changed to ES6 template string style
delimiters: ['[[', ']]']
})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> <!-- this outputs '[[msg]]' as is -->
<!-- this works: <span class="example">{% verbatim %}{{ msg }}{% endverbatim %}</span> -->
</template>
<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}) |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 3 replies
-
|
Are you able to set delimiters without vue3-sfc-loader ? |
Beta Was this translation helpful? Give feedback.
-
|
Without vue3-sfc-loader I cannot serve .vue files at all, using this setup. As far as I know (but I could be wrong), I cannot change the delimiters using vue-cli either, unless I configure the runtime compiler. But I am not sure how (and even if) I can apply those config options to this setup. With this setup, using vue3-sfc-loader, I can use all of vue features (including routing, vuex, animations, everything), all that while rendering components dynamically in django backend (which is very useful, and a powerful synergy in my opinion). Unfortunately django uses the same delimiters, which have to be explicitly escaped if I want to pass them to vue. As I could not find any precedence to this, I could absolutely be making some codding error, or missing some feature, so please don't hesitate to request details. |
Beta Was this translation helpful? Give feedback.
-
|
Custom delimiters works properly without vue3-sfc-loader (see https://jsfiddle.net/9pkozy8d/) |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
Thank you. This is extremely helpful |
Beta Was this translation helpful? Give feedback.
v0.2.22has adelimiteroption (see https://github.com/FranckFreiburger/vue3-sfc-loader/blob/main/docs/api/interfaces/options.md#delimiters)