Good day everyone. I am very new in using both django and vue.js . I am currently creating a project where I use django mainly for backend and integrate vue.js for the frontend. However, I find myself struggling so much on how to call vue.js functionalities or components in django html templates. I just couldn’t crack the right steps to correctly call vue in my django project. I don’t know either if I am heading the right way or maybe you can help me show the right way to do it. I already installed node.js also. Here are my codes.
Django Template at userstemplatesusersmaster.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Profile</title>
{% load bootstrap4 %}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}
</head>
<body>
<div class="container">
{% block content %}
{% endblock %}
</div>
</body>
<script src="{% static 'js/vue.global.js' %}"></script>
<script src="{% static 'js/custom-vue.js' %}"></script>
<script src="{% static 'js/EventForm.vue' %}"></script>
Path: C:UsersJunpython-projectcalendarprojectstaticjs
EventForm.vue
<!-- EventForm.vue -->
<template>
<div class="event-form">
<!-- Your calendar event form HTML here -->
<form @submit.prevent="addEvent">
<!-- Form fields for event details -->
<!-- For example: Event title, date, time, description, etc. -->
<!-- You can use Bootstrap or any other CSS framework for styling -->
</form>
</div>
</template>
<script>
export default {
methods: {
addEvent() {
// Logic to handle event creation and submission
// You can use Axios or Django REST Framework API to save events to the server
// Close the form or reset form fields as needed
}
}
};
</script>
<style scoped>
/* CSS styling for your event form */
</style>
custom-vue.js
const app = Vue.createApp({
data() {
return {
isEventFormVisible: false // Initially, the event form is hidden
};
},
methods: {
showEventForm() {
this.isEventFormVisible = true;
}
}
});
app.mount('#app');
Error Screenshots
2
Answers
You cannot simply fetch vue modules directly as static files in django.
Those modules need to go through "build" process that will produce "bundled" js and css files, which you can then attach as static files in django.
Please refer to this gist for more details:
https://gist.github.com/lsapan/bdc1fbba71058cc337abc181a84b4f49
You need build tools to compile SFC(Single-File Component).
If you want to directly use CDN, this will be helpful.