michaelbukachi/django-vuejs-tutorial

A tutorial to integrate Vue.js with django

django-vuejs-tutorial's Issues

is there any write file plugin to be used ?

i keep getting this error when i run python manage.py runserver. i get the webpack-stats.json doesn't generate. i am thinking a write file plugin should be used to generate it when npm run dev command is entered. i am confused.

`` File "C:\Users\USER\Desktop\bio\codex\vuecrow\venv\lib\site-packages\django\core\handlers\exception.py", line 34, in inner
response = get_response(request)
File "C:\Users\USER\Desktop\bio\codex\vuecrow\venv\lib\site-packages\django\core\handlers\base.py", line 145, in _get_response
response = self.process_exception_by_middleware(e, request)
File "C:\Users\USER\Desktop\bio\codex\vuecrow\venv\lib\site-packages\django\core\handlers\base.py", line 143, in _get_response
response = response.render()
File "C:\Users\USER\Desktop\bio\codex\vuecrow\venv\lib\site-packages\django\template\response.py", line 106, in render
self.content = self.rendered_content
File "C:\Users\USER\Desktop\bio\codex\vuecrow\venv\lib\site-packages\django\template\response.py", line 83, in rendered_content
content = template.render(context, self._request)
File "C:\Users\USER\Desktop\bio\codex\vuecrow\venv\lib\site-packages\django\template\backends\django.py", line 61, in render
return self.template.render(context)
File "C:\Users\USER\Desktop\bio\codex\vuecrow\venv\lib\site-packages\django\template\base.py", line 171, in render
return self._render(context)
File "C:\Users\USER\Desktop\bio\codex\vuecrow\venv\lib\site-packages\django\template\base.py", line 163, in _render
return self.nodelist.render(context)
File "C:\Users\USER\Desktop\bio\codex\vuecrow\venv\lib\site-packages\django\template\base.py", line 937, in render
bit = node.render_annotated(context)
File "C:\Users\USER\Desktop\bio\codex\vuecrow\venv\lib\site-packages\django\template\base.py", line 904, in render_annotated
return self.render(context)
File "C:\Users\USER\Desktop\bio\codex\vuecrow\venv\lib\site-packages\django\template\library.py", line 192, in render
output = self.func(*resolved_args, **resolved_kwargs)
File "C:\Users\USER\Desktop\bio\codex\vuecrow\venv\lib\site-packages\webpack_loader\templatetags\webpack_loader.py", line 12, in render_bundle
tags = utils.get_as_tags(bundle_name, extension=extension, config=config, attrs=attrs)
File "C:\Users\USER\Desktop\bio\codex\vuecrow\venv\lib\site-packages\webpack_loader\utils.py", line 62, in get_as_tags
bundle = _get_bundle(bundle_name, extension, config)
File "C:\Users\USER\Desktop\bio\codex\vuecrow\venv\lib\site-packages\webpack_loader\utils.py", line 40, in _get_bundle
bundle = get_loader(config).get_bundle(bundle_name)
File "C:\Users\USER\Desktop\bio\codex\vuecrow\venv\lib\site-packages\webpack_loader\loader.py", line 59, in get_bundle
assets = self.get_assets()
File "C:\Users\USER\Desktop\bio\codex\vuecrow\venv\lib\site-packages\webpack_loader\loader.py", line 38, in get_assets
return self.load_assets()
File "C:\Users\USER\Desktop\bio\codex\vuecrow\venv\lib\site-packages\webpack_loader\loader.py", line 31, in load_assets
self.config['STATS_FILE']))
OSError: Error reading C:\Users\USER\Desktop\bio\codex\vuecrow\webpack-stats.json. Are you sure webpack has generated the file and the path is correct?
[06/Mar/2020 08:40:35] "GET / HTTP/1.1" 500 129259

Css in Demo.vue throws Error

I just went through the tutorial and I get an webpack error when executing ./node_modules/.bin/webpack.

(venv) Severins-MacBook-Pro:my_django_vue severinbuhler$ ./node_modules/.bin/webpack
Hash: 5310d40d11efa30d85d3
Version: webpack 4.41.2
Time: 861ms
Built at: 11/25/2019 8:02:00 AM
 Asset     Size  Chunks             Chunk Names
app.js  771 KiB    main  [emitted]  main
Entrypoint main = app.js
[./assets/js/index.js] 226 bytes {main} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]
    + 14 hidden modules

ERROR in ./assets/js/components/Demo.vue?vue&type=style&index=0&lang=css& (./node_modules/vue-loader/lib??vue-loader-options!./assets/js/components/Demo.vue?vue&type=style&index=0&lang=css&) 11:0
Module parse failed: Unexpected token (11:0)
File was processed with these loaders:
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| 
| 
> .red {
|     color: red;
| }
 @ ./assets/js/components/Demo.vue?vue&type=style&index=0&lang=css& 1:0-130 1:146-149 1:151-278 1:151-278
 @ ./assets/js/components/Demo.vue
 @ ./assets/js/index.js

Demo.vue

<template>
    <div>
        <p class="red">This is just a demo.</p>
    </div>
</template>

<script>
</script>

<style>
.red {
    color: red;
}
</style>

The error only occurs when I have css in <style>.

Does anybody know why this error occurs?

Best regards
Severin

Problem in configuring webpack?

Hi Michael,
I am new to django-webpack and I am getting the following error while running django server. I also gone through issue created regarding the same, but its not resolving my problem.

Error reading webpack-stats.json. Are you sure webpack has generated the file and the path is correct?

Can you help me out to get through??

Vue have no design

Please change the spelling - mkdir -p assets/js/componets --> components

This might save some time for people who like to experiment and want to save some time by copying code. I wasted a few minutes due to the spelling mistake because I copied that simple command without realising the spelling mistake which turned out to be a disaster later. I request you to update the wiki so that no one else has to go through this.

missing webpack-bundle-tracker in wiki guide

Hello
The wiki guide has a command for installing all the node-modules

npm install --save-dev axios bootstrap-sass jquery node-sass sass-loader vue webpack webpack-cli @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/runtime babel-loader babel-preset-es2015 babel-preset-stage-0 css-loader style-loader vue-loader vue-hot-reload-api vue-template-compiler

this command is missing webpack-bundle-tracker

ModuleNotFoundError: No module named 'webpack_loader'

At the last step of tutorial, after string 'webpack 5.72.0 compiled successfully in 1446 ms',

when run 'python manage.py runserver'

I get message:

ModuleNotFoundError: No module named 'webpack_loader'

And django-vuejs app is not working!

Add authentication

How to use bootstrap from node-modules

Hi, I'm trying to add css in my index.html file but I'm unable to do it, I've tried:

<link rel="stylesheet" href='../../node_modules/bootstrap/dist/css/bootstrap.min.css'>
<link rel="stylesheet" href='/node_modules/bootstrap/dist/css/bootstrap.min.css'>

But none of them works, Could you help me please?

Error reading webpack-stats.json

When I try to access the index page at http://localhost:8000 I get the following error:

OSError at /
Error reading webpack-stats.json. Are you sure webpack has generated the file and the path is correct?
...

I'm using Django 2.0.3
I have run the command ./node_modules/.bin/webpack in the project folder, and the result seams OK.
Any ideias?

components

The browser will not acknowledge when I make a change to an existing component.

Error reading webpack-stats.json

Hi I follow exactly your tutorial, and the webpack-stats.json was generated inside the assets/bundles/webpack-stats.json

I try to preview at browser, and got this error

Error reading /Users/cyberfly/learndjango/webpack-stats.json. Are you sure webpack has generated the file and the path is correct?

this is my directory

learndjango
- assets
-- bundles
--- webpack-stats.json
- learndjango
- myapp

settings.py

WEBPACK_LOADER = {
    'DEFAULT': {
        'BUNDLE_DIR_NAME': 'bundles/',
        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
    }
}

webpack.config.js is located inside project folder root

Can you help me identify what is wrong here?

Migrate from travis ci to github actions

Recommend to correct the wiki tutorial

I'm just followed how to integrate VueJS with Django in tab Wiki. In the final when run the app it always said cannot find template module. Then I found that you missed the step to set default directory for template in settings.py. The TEMPLATES should be like this:

TEMPLATES = [
    {
        ...
        'DIRS': [os.path.join(BASE_DIR, 'myapp/templates')],
        ...
    },
]

Can you check and correct it if I'm right, for other people come to your tutorial after me no be confused :)

Wiki tutorial fix for Vue ReferenceError

Hi,

Thank you for the detailed tutorial!
I wanted to PR a tiny fix but it seems it's a bit complicated for Wiki pages, so I just wanted to let you know I got a ReferenceError for Vue that was fixed by adding window.Vue = Vue; in index.js.

So index.js now looks like this:

window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');

import Vue from 'vue';
import Demo from "./components/Demo.vue";

window.Vue = Vue;
const app = new Vue({
    el: '#app',
    components: {
        Demo
    }
});

Hope this helps and thank you again,
Zvi