EugeneDae/django-vue-cli-webpack-demo

Use in Django Admin templates

Opened this issue · 0 comments

bnku commented

templates/base.html

{% extends "admin/base_site.html" %}
...
<div id="content-main">
{% block content %}{% endblock %}
</div>
...

templates/index.html

{% extends "base-vue.html" %}

{% block content %}
    <div id="app"></div>
    {{ block.super }}
{% endblock content %}

public/index.html

{% extends "base.html" %}

{% block extrahead %}
  {{ block.super }}
  <%= htmlWebpackPlugin.files.css.map(src => `<link rel="stylesheet" type="text/css" href="${src}">`).join("\r\n ") %>
{% endblock %}

{% block content %}
  {{ block.super }}
  <%= htmlWebpackPlugin.files.js.map(src => `<script type="text/javascript" src="${src}"></script>`).join("\r\n ") %>
{% endblock %}

vue.config.js

chainWebpack: (config) => {
    ...
    config.plugin("html").tap((args) => {
      args[0].inject = false;
      return args;
    });
    ...
}

https://github.com/jantimon/html-webpack-plugin/tree/main/examples/custom-insertion-position
jantimon/html-webpack-plugin#1284