Skip to content

adri-2/django-vuejs-inertia

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 

Repository files navigation

# 🌐 Projet Django + Vue 3 + Inertia.js

Ce projet est une application web moderne construite avec :
- **Django** (backend)
- **Vue.js 3** (frontend)
- **Inertia.js** pour connecter le backend Django au frontend Vue sans API REST.

## 📦 Prérequis

- Python 3.8+
- Node.js (v16+ recommandé)
- npm ou yarn
- pipenv / poetry / virtualenv (au choix)
- PostgreSQL (ou autre base de données compatible Django)

## ⚙️ Installation

### 1. Cloner le dépôt
```bash
git clone https://github.com/votre-utilisateur/nom-du-projet.git
cd nom-du-projet

2. Installer les dépendances Python

# avec pipenv
pipenv install

# ou avec virtualenv
python -m venv env
source env/bin/activate
pip install -r requirements.txt

3. Installer les dépendances Node (Vue + Inertia)

cd frontend
npm install
# ou
yarn install

4. Créer la base de données

python manage.py migrate

5. Lancer les serveurs

Backend (Django)

python manage.py runserver

Frontend (Vue + Vite)

cd frontend
npm run dev

🗂 Structure du projet

nom-du-projet/
├── backend/
│   ├── settings.py
│   └── urls.py
├── frontend/
│   ├── pages/              # Composants pages Vue.js
│   ├── components/         # Composants partagés
│   ├── App.vue
│   ├── main.js             # Point d'entrée Vue/Inertia
│   └── vite.config.js
├── templates/
│   └── index.html          # Fichier utilisé par Inertia
├── manage.py
└── README.md

🔁 Fonctionnement de Inertia.js

Inertia.js agit comme un "router" entre Django et Vue.js. Il permet de renvoyer des composants Vue directement depuis les vues Django comme si on utilisait un framework SPA, sans avoir à écrire d’API.

Exemple de vue Django :

from inertia import render

def dashboard(request):
    return render(request, 'Dashboard', props={
        'user': request.user.username
    })

Composant Vue (Dashboard.vue) :

<template>
  <div>
    <h1>Bienvenue {{ user }}</h1>
  </div>
</template>

<script setup>
defineProps({ user: String })
</script>

🧪 Tests

python manage.py test

🛠️ Build pour production

cd frontend
npm run build

# Ensuite collecter les fichiers statiques Django
cd ..
python manage.py collectstatic

📃 Licence

Ce projet est sous licence MIT. Libre à vous de le réutiliser et de le modifier à votre convenance.


✨ Fait avec amour et technologie moderne.


---

Tu veux que je l’adapte à ton propre projet (nom, modules, etc.) ? Je peux aussi ajouter une section **Docker**, **déploiement**, ou **authentification** avec Inertia si besoin.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published