A Django app to render Vue files as templates.
Project description
Djavue
Djavue is a Django app that allows the usage of Vue files as Django Templates.
Installation
- Install django-djavue from pip
pip install django-djavue
- Add djavue to your INSTALLED APPS
INSTALLED_APPS = [
...,
'djavue',
...
]
Quickstart
-
Create a .vue file inside your templates folder.
-
Write a view that loads the template
from djavue import get_vue_template
def index(request):
template = get_vue_template('index.vue', title="Homepage")
return template.render({"""context here"""})
## in urls.py -> path('', index, name='index')
# Or
from djavue import VueTemplate
class Index(VueTemplate):
def get_context(self, request):
return {"""Context here"""}
class Meta:
page_title = "Homepage"
template_name = "index.vue"
## in urls.py -> path('', Index.as_view(), name='index')
Passing Context
To get context data from django to your vue file you must use the $(key)
inside the template.
Example
Vue:
<template>
<h1>My name is {{name}}</h1>
<h2>My age is $(age)</h2>
</template>
<script>
export default {
data: () => ({
name: "$(name)",
}),
};
</script>
Django:
from djavue.views import VueTemplate
class Index(VueTemplate):
def get_context(self, request):
return {'name':'Joe', 'age':20}
class Meta:
page_title = "Homepage"
template_name = "index.vue"
Result:
My name is Joe
Importing
Due to some limitations when adapting Vue to Python, the import statement is different: you only need to pass the file (exactly how you would pass to the get_template). The name of the tag will be the name of the file.
<template>
<div>
<component-a></component-a>
<component-b></component-b>
</div>
</template>
<script>
import "component-a";
import "components/component-b";
export default {};
</script>
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
django-djavue-0.2.tar.gz
(5.5 kB
view hashes)