Could you assist me in solving this issue? I've been struggling to find a solution for a while now. Where should I place my
<script src="{% static 'js/custom-vue.js' %}"></script>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' %}
<script src="{% static 'js/vue.global.js' %}"></script>
<script src="{% static 'js/custom-vue.js' %}"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/icons/bootstrap-icons.css">
</head>
<body>
<div class="container">
{% block content %}
{% endblock %}
</div>
</body>
</html>
profile.html
{% extends 'users/master.html' %}
{% block title %}
Profile Page
{% endblock %}
{% block content %}
<h2>Profile</h2>
<p>ID: {{ user.id }}</p>
<p>Username: {{ user.username }}</p>
<p>Email: {{ user.email }}</p>
<p>First name: {{ user.first_name }}</p>
<p>Last name: {{ user.last_name }}</p>
<p><a href="{% url 'logout' %}">Logout</a></p>
<div class="container-fluid">
<div id="app">
<button @click="showModal" class="btn btn-primary"><i class="bi bi-calendar-event"></i> New Event</button>
<button @click="showCalModal" class="btn btn-primary"><i class="bi bi-calendar-check"></i> Calendar Category</button>
<button @click="showDivModal" class="btn btn-primary"><i class="bi bi-person-square"></i> Division</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add event</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<p><input type="text" name="event_title" class="form-control" placeholder="Event title" required></p>
<!-- more form fields here -->
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div> <!-- end of app -->
<hr>
</div>
{% endblock %}
custom-vue.js
// Your custom-vue.js content here
settings.py
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.2/howto/static-files/
STATIC_URL = 'static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'calendars/static'),
os.path.join(BASE_DIR, 'divisions/static'),
os.path.join(BASE_DIR, 'employees/static'),
os.path.join(BASE_DIR, 'events/static'),
os.path.join(BASE_DIR, 'users/static'),
# Add paths for other app static directories as needed
]
error: https://i.sstatic.net/9ePdi.png
folder structure https://i.sstatic.net/7xAIx.png