Hello everyone, I am completely new to working with both django and vue.js. Currently, I am in the process of developing a project where I am utilizing django for the backend and integrating vue.js for the frontend. However, I am facing difficulties when it comes to calling vue.js functionalities or components in django html templates. I seem to be struggling to figure out the correct steps to successfully integrate vue into my django project. I'm not sure if I am on the right path or if there is a better way to approach this. I have also already installed node.js. Here are the snippets of my code.
Django Template located at users\templates\users\master.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:\Users\Jun\python-project\calendarproject\static\js
https://i.sstatic.net/yjxuC.png
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