A simple, opinionated way to incorporate VueJS into Django apps
Project description
PointOfVue
A simple, opinionated way to incorporate VueJS into your Django applications
Installation
pip install PointOfVue
Add pointofvue
to your Django installed apps:
INSTALLED_APPS = [
# other apps ...
'pointofvue',
]
Basic Usage
In your view, import pointofvue
and send a pointofvue.VueContext
instance to your template
import pointofvue
def view_handler(request):
vue_ctx = pointofvue.VueContext()
vue_ctx.set_data('var1', 'My value')
return render(request, 'template.html', {
"vue_ctx": vue_ctx,
})
In your template, write your Vue code in a #app
element and use ${
and }
for accessing Vue data. Then load the pointofvue
templates and call the {% vue %}
tag with your VueContext
to load VueJS and create an app.
<div id='app'>
The value of 'var1' is <b>${ var1 }</b>
</div>
{% load pointofvue %}
{% vue vue_ctx %}
Custom JavaScript
It is likely that you won't be able to get away with just writing HTML Vue alone, you may need to define methods and other JS native entities in custom JavaScript.
Note: pointofvue encourages you to not write inline JavaScript in your Django HTML templates. Write separate JS files and serve them via staticfiles instead
Define a Vue entry point that exports your Vue data. It may look like this:
import MyCustomComponent from './my-component.js';
const components = {
MyCustomComponent,
};
export {
components,
};
Build that JS file (target as a library if using vue-cli-service). Then register your script with the Python VueContext in your view:
vue_ctx.add_script('myscript')
Now you can use your custom component in your template:
<div id="app">
<b>My Custom Component</b>
<MyCustomComponent />
</div>
Development
Releasing
I use bump2version to manage version bumping. This will update the version number in the library, commit it, and create a version tag.
bump2version minor
git push --follow-tags
Project details
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Hashes for pointofvue-0.1.1-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | a9726ce577e56c293dacda3bb1de196b1df22ce6dfe6715caf508faa6ce0c1fd |
|
MD5 | 408a513a76310f35e0bf215d0f9c133d |
|
BLAKE2b-256 | 75bffcb3888a19967e1fb0ab67bdebeafde7f4a568de2837d8afe9f58ee6d4c0 |