Vue&Django

Use Django in the back end and Vue in the Front end of your aplication. vue_django creates a deictionary with base variables and an map of your API (using django-rest-framework), and pass all that information to a Vue application so both frameworks can communicate more efficiently.

Instalation

Download this repo

Add vue_django to your aplications in your settings.py, it needs to be after Django Rest Framework, and before your apps.

setings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'vue_django'
]

Create your API route, should be a centralized route where you serve the en points of your api, it is useful to create a separated urls file to your api, such as api.py and add your endpoints to it, and then add it to your main urls file.

api.py
```
urlpatterns = [
    url('accounts/',
        include(('myapp.accounts.urls','accounts'))
    ),    
    url('invoices/',
        include(('myapp.invoices.urls','invoices'))
    ),
]
```
urls.py
```
urlpatterns = [
    url('my_restapi/', include((api, "api"), namespace='my_restapi'))
    ]
```
Then you need to define this route as a Global Variable, for vue_django to know where to look at.

settings.py
```
DJV_API_URLS='myapp.api' # the api.py file
```

Insert the vue_django renderer to your main html aplication file.

urls.py

urlpatterns = [
    path('vue_django/', VueDjangoConfig.as_view(), name="vue_django"),
    ]

index.html

<script src="{% url 'vue_django'  %}"></script>

Chamartin3/vue_django

Vue&Django

Instalation