I have been running DWL for couple of months now and working great! I now tried to inc

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

I jumped the fence into java land... No more Django... Sorry... Good luck.

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

DWL with vue.js does not work (the bundle itself works...) about django-webpack-loader HOT 7 CLOSED

musicformellons commented on August 19, 2024

DWL with vue.js does not work (the bundle itself works...)

from django-webpack-loader.

Comments (7)

musicformellons commented on August 19, 2024

The js (render_bundle) needs somehow to come after the vue tag reference in the html file!

This works:

{% load staticfiles %}
{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
</head>
<body>

<h3>[[ message ]]</h3>
kiekeboe

{% render_bundle 'main' %}
</body>
</html>

from django-webpack-loader.

darklow commented on August 19, 2024

@musicformellons Could you please share your config of webpack for vuejs?
I am struggling putting together Django and VueJS.
Thank you.

from django-webpack-loader.

musicformellons commented on August 19, 2024

I jumped the fence into javascript land... No more Django... Sorry... Good luck.

from django-webpack-loader.

rawberg commented on August 19, 2024

I'm using Vue.js with Django Webpack loader without problems. Here is my index.html template.

{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>App Title</title>
        {% render_bundle 'public' 'css' %}
    </head>
    <body>
        <div id="stx-viewport"></div>
        {% render_bundle 'public' 'js'%}
    </body>
</html>

from django-webpack-loader.

darklow commented on August 19, 2024

@rawberg I don't have a problem with template part, these few tags are easy.
I was wondering about webpack config with hot reload, could you please share that? Thanks.

from django-webpack-loader.

rawberg commented on August 19, 2024

I haven't gone through the trouble of setting up hot reload but good old fashioned refresh seems to work pretty well with this setup.

module: {
        loaders: [
            {
                test: /\.vue$/,
                loader: 'vue'
            },
            {
                test: /\.js$/,
                loader: 'babel',
                exclude: /node_modules/
            },
            {
                test: /\.json$/,
                loader: 'json',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({fallbackLoader: "style-loader", loader: "css-loader"}),
                exclude: /node_modules/
            },
            {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract({fallbackLoader: "style-loader", loader: "css-loader!less-loader"})
            },
            // handles all references to these files in JS or CSS, use copy webpack plugin
            // for images references in HTML or anywhere else
            {
                test: /\.(png|jpg|gif|svg|gif)$/,
                loader: 'file-loader',
                query: {
                    name: 'img/[name]-[hash].[ext]'
                }
            },
            {
                test: /\.(ttf|eot|woff|woff2)$/,
                loader: 'file-loader',
                query: {
                    name: 'font/[name]-[hash].[ext]'
                }
            },
            {
                test: /\.(txt|ico)$/,
                loader: 'static-loader'
            }
        ]

from django-webpack-loader.

darklow commented on August 19, 2024

@rawberg Thank you. This is very helpful.

from django-webpack-loader.

Recommend Projects