Clever Geek Handbook

Getting Django staticfiles enables working with Vue.js.vue templates

I have a Django SPA built with Vue.js v2 / webpack.

I want to use static Django template tags to add links to images, etc. inside Vue.js templates .vue

.

Right now in my template base.html

for Django:

{% load static %}
{% load render_bundle from webpack_loader %}
<html>
   <head>
      <!-- This works fine here! -->
      <link rel="stylesheet" href="{% static 'css/test.css' %}" />
      ...
   </head>
   <body> 
      <div id="app">
        <!-- Vue.js app gets mounted here -->
      </div>
   </body>
</html>

and this is of course the HTML page I am using for SPA (Single Page Application).

But when I try to use static tags in my template files .vue

like:

{% static 'js/test.js' %}

It doesn't work - it never gets interpolation because Django is server-side and Vue is client-side.

I want to keep using staticfiles tags (not hard links) because I am using different storage servers for static files, media, and even from local / staging / staging environments.

Any ideas on how to handle this with Django / Vue.js? What's a good solution for getting static files associated with client templates?

+3


source to share


1 answer


Good decision? Segregation of duties. Why should Django templates be involved at all? Your external code can handle all rendering. Your back end can just serve the rest api endpoints.



-1


source






More articles:


All Articles