CODEWITHSUNDEEP
djangovue.jsvuetify.js
Jack022
Jack022

Reputation: 1257

How do i use Vue templates in Django?

This is my index page in django

{% load render_bundle from webpack_loader %}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/3.8.95/css/materialdesignicons.css">
    <meta charset="UTF-8">
    <title>My test</title>
</head>
<body>


    <div id="app">
     <h1>TEST</h1>
    </div>

    {% render_bundle 'main' %}

</body>
</html>

And this is a standard Vue navbar.

<template>

  <v-app id="sandbox">
    <v-navigation-drawer
      v-model="primaryDrawer.model"
      :clipped="primaryDrawer.clipped"
      :floating="primaryDrawer.floating"
      :mini-variant="primaryDrawer.mini"
      :permanent="primaryDrawer.type === 'permanent'"
      :temporary="primaryDrawer.type === 'temporary'"
      app
      overflow
    ><v-switch
        v-model="$vuetify.theme.dark"
        primary
        label="Dark"
      ></v-switch></v-navigation-drawer>

    <v-app-bar
      :clipped-left="primaryDrawer.clipped"
      app
    >
      <v-app-bar-nav-icon
        v-if="primaryDrawer.type !== 'permanent'"
        @click.stop="primaryDrawer.model = !primaryDrawer.model"
      ></v-app-bar-nav-icon>
      <v-toolbar-title>Vuetify</v-toolbar-title>

    </v-app-bar>


    </v-app>
</template>

The code is working, and i can see Vue being loaded when i open my Django site.

The problem with this is that i don't know how to get them along. For example, i added a <h1>TEST</h1> but it does not appear when i load Vue, since the Vue part covers it. I also don't understand, if i have a conditional on my Django template, such as {% if user.is_authenticated %} i can't use it on Vue, because it won't be loaded by it.

For example, i have a navbar. Instead of that navbar i want to use the below Vue navbar but i can't, because the current navbar has some links to parts of my site, and since the links are made in Django template language, they won't be loaded by Vue.

Upvotes: 1

Views: 941

Answers (1)

Hamza Mogni
Hamza Mogni

Reputation: 720

You should understand that Vue is a frontend framework that is agnostic to the backend, and Django is, in contrast a backend framework (that can be used in such way to be agnostic to the frontend, I assume this is what you are trying to do).

The way Vue works is that it renders the content inside the div#app tag in index.html, that's why your h1 tag doesn't work. you will have to include that h1 tag inside your vue app in the right component in order to work (don't forget to recompile your components after editing, in case you are using smthng like webpack...etc).

Regarding the Django conditionals part, the point is that now, your Vue app is a seperate application than the Django App (and they will have to communicate through an API using HTTP calls). So in order for authentication to work (or any other logic), you will have to handle that logic both in your Vue app and your Django app

Upvotes: 3

Related Questions