how to use VueJs components in Django using django webpack loader?

Question

I followed this tutorial and integrated Django and VueJs using django-webpack-loader, now the main.js output from django-webpack-loader is loading to my index.html

This is my project directory structure

 - assets
  - bundles
     - app.js
  - js
     - components
           - Demo.vue
     - index.js
 - db.sqlite3
 - manage.py
 - myapp
 - myproject
 - node_modules
 - package.json
 - package-lock.json
 - requirements.txt
 - templates
 - webpack.config.js
 - webpack-stats.json

My Demo.vue component has been imported to the index.js and using webpack.config.js file all necessary file has been bundled together to app.js.

My question is what is the next step? For example, if I have some VueJs components and want to use them in some of my templates how should I do that? Should I create components in the component directory and bundle them all? If this is the case how should I choose to use or not use a component in a specific template? And how should I use Django template tags to insert dynamic data? Or I should write my components in another way?

I know there is multiple questions here, but I couldn't find a good reference to answer my questions so any help would be appreciated.

If it's helpful, here's one of my live production Django apps: https://github.com/wcarhart/willcarh.art. It doesn't use Vue.js, but it does use vanilla JS on the front end. — wcarhart, Sep 11 '19 at 02:20

wcarhart · Answer 1 · 2019-09-11T03:41:25.543

Django uses a templating language, called Jinja, to pass context (information) from view to template. Assuming that myapp is a Django app, you should have a myapp/views.py file by default.

In myapp/views.py, you have the ability to create a view (code that is run when a specific URL is accessed). For example, your view could look something like:

from django.shortcuts import render

def my_view(request):
    context = {
        'my_variable': 'my_variable_value',
    }
    return render(request, 'template.html', context)

Then, in template.html*, you can use Jinja to parse your context (access my_variable's value). Your template doesn't have to be an HTML file, it can be anything (JS, PHP, etc.), it's just the template file that's loaded from your view.

<html lang="en">
  <head></head>
  <body>
    <h1>{{ my_variable }}</h1>
  </body>
</html>

You can use Jinja with Javascript too:

<script>
function test() {
    console.log({{ my_variable }});
}
</script>

Jinja supports a variety of functionality, including loops, if blocks, and custom functions (tags). Read more: https://codeburst.io/jinja-2-explained-in-5-minutes-88548486834e

If you're using static files that are NOT in your template file, you'll have to serve them as static files. This is a little more complicated, but not hard! You'll have to use a third party library for serving these files in production, like whitenoise. Here's a great tutorial for Django static files, as this extends past the scope of this question.

*Best practice is to make a directory myapp/templates and put template.html in that directory. Then, point Django to your templates folder in settings.py:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ["myapp/templates"],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

I am well aware that how django template works, I should have mentioned that, I just don't know how to use components? for example imagine If I have an avatar component and the avatar component loads to the template from bundle output from webpack-loader(main.js in this case), how should pass the avatar source image path(the django variable) to the avatar component, — Saro, Sep 11 '19 at 13:33
@salmanrezaie I may be misunderstanding your question, but if you have your Vue component in `index.js`, you can specify `index.js` as a template in Django and then use Jinja to pass Django context variables into the template. As for passing JSON, I usually pass JSON between Django models as a string, and then parse them in Python before passing them to a view. This could work for Vue, but there's probably a better way — wcarhart, Sep 11 '19 at 18:58
small correction: while you _can_ use jinja2, django has its own template language. — Florian, Oct 13 '19 at 17:50

how to use VueJs components in Django using django webpack loader?

1 Answers1