Extension Flask pour intégrer Vue 3, Vite et Tailwind CSS 4

These details have not been verified by PyPI

Project links

Project description

Flask-Vue

Une extension Flask pour intégrer facilement Vue 3, Vite.js et Tailwind CSS 4 dans une application Flask, offrant une expérience de développement moderne pour les applications web full-stack.

Caractéristiques

Intégration transparente de Vue 3 dans une application Flask
Support du mode développement avec Hot Module Replacement (HMR)
Utilisation de Vite.js pour un développement frontend rapide et une construction optimisée
Intégration de Tailwind CSS 4 pour un styling moderne et efficace
Support de Vue Router avec gestion des erreurs 404 et pages d'erreur
Support de Pinia pour une gestion d'état avancée
Outils CLI pour initialiser, installer, démarrer et construire votre projet Vue
Gestion automatique des assets en production

Installation

pip install flask-vue

Démarrage rapide

Dans votre application Flask, initialisez l'extension:

from flask import Flask
from flask_vue import Vue

app = Flask(__name__)
vue = Vue(app)

# Ou avec la factory pattern
# vue = Vue()
# vue.init_app(app)

Initialisez un nouveau projet Vue dans votre application:

# Projet Vue basique
flask vue init

# Avec Vue Router
flask vue init --router

# Avec Pinia (state management)
flask vue init --pinia

# Avec Vue Router et Pinia
flask vue init --router --pinia

Installez les dépendances JavaScript:

flask vue install

Démarrez le serveur de développement Vue:

flask vue start

Dans vos templates Flask, utilisez les helpers Jinja:

<!DOCTYPE html>
<html>
<head>
    <title>Mon application Flask-Vue</title>
    {{ vue_hmr() }}
    {{ vue_css('main.css') }}
</head>
<body>
    <div id="app"></div>
    {{ vue_js('main.js') }}
</body>
</html>

Pour déployer en production, construisez les assets:

flask vue build

Configuration

Vous pouvez configurer l'extension via des paramètres lors de l'initialisation:

vue = Vue(app,
    # Mode de développement (si non spécifié, utilise app.config['VUE_MODE'] ou app.debug)
    dev_mode=True,  
    
    # URL du serveur de développement Vite (par défaut: http://localhost:5173)
    dev_server_url='http://localhost:3000',  
    
    # Chemin vers les assets dans le dossier static
    assets_path='vue/',  
    
    # Mappage personnalisé des points d'entrée
    entry_map={  
        'app.js': 'src/app.js',
        'admin.js': 'src/admin.js'
    },
    
    # Activer/désactiver les plugins Vue
    plugins={  
        'vue_router': True,
        'pinia': True
    }
)

Ou via les variables d'environnement ou la configuration Flask:

FLASK_VUE_MODE: development ou production
Définir app.config['VUE_MODE'] à development ou production

Utilisation

Commandes CLI

L'extension fournit plusieurs commandes CLI pour gérer votre projet Vue:

flask vue init: Initialise un nouveau projet Vue avec Vite et Tailwind CSS
- --router: Active Vue Router avec pages d'exemple et gestion d'erreurs
- --no-router: Désactive Vue Router (comportement par défaut)
- --pinia: Active Pinia (gestion d'état) avec stores d'exemple
- --no-pinia: Désactive Pinia (comportement par défaut)
- --path/-p: Spécifie le chemin où initialiser le projet (défaut: frontend)
flask vue install: Installe les dépendances NPM
- --path/-p: Spécifie le chemin du projet (défaut: frontend)
flask vue start: Démarre le serveur de développement Vite
- --path/-p: Spécifie le chemin du projet (défaut: frontend)
flask vue build: Construit les assets Vue pour la production
- --path/-p: Spécifie le chemin du projet (défaut: frontend)

Helpers Jinja

L'extension ajoute plusieurs fonctions d'aide à l'environnement Jinja:

vue_hmr(): Génère la balise script pour le Hot Module Replacement en mode développement
vue_js(entry_point): Génère la balise script pour un point d'entrée JavaScript
vue_css(entry_point): Génère les balises CSS pour un point d'entrée
vue_asset(filename): Génère l'URL pour un asset
vue_has_router(): Vérifie si Vue Router est activé
vue_has_pinia(): Vérifie si Pinia est activé

Modes de développement et production

En mode développement:

Les assets sont servis depuis le serveur de développement Vite
Le Hot Module Replacement (HMR) est activé
Les modifications sont reflétées immédiatement dans le navigateur

En mode production:

Les assets sont compilés via flask vue build
Les fichiers sont optimisés et minifiés
Les chemins sont simplifiés sans hachage pour une intégration facile avec Flask

Plugins Vue

Vue Router

Vue Router permet de créer des applications à page unique (SPA) avec navigation sans rechargement de page.

Activation:

flask vue init --router

Ou dans l'initialisation de l'extension:

vue = Vue(app, plugins={'vue_router': True})

Structure générée:

src/router/index.js: Configuration du routeur
src/views/: Dossier contenant les composants de pages
- Home.vue: Page d'accueil
- About.vue: Page À propos
- NotFound.vue: Page 404 pour les routes inexistantes
- ErrorPage.vue: Page d'erreur générique

Gestion des erreurs:

Gestion automatique des routes inexistantes (404)
Gestion des erreurs pendant la navigation
Redirection vers des pages d'erreur stylisées

Pinia (Store)

Pinia est la bibliothèque de gestion d'état recommandée pour Vue 3, offrant une API intuitive et une intégration avec les outils de développement.

Activation:

flask vue init --pinia

Ou dans l'initialisation de l'extension:

vue = Vue(app, plugins={'pinia': True})

Structure générée:

src/store/index.js: Configuration des stores
- Store utilisateur avec authentification
- Store compteur pour exemple

Architecture

Après l'initialisation, votre projet aura la structure suivante:

votre_app_flask/
├── app.py
├── frontend/
│   ├── index.html
│   ├── vite.config.js
│   ├── package.json
│   ├── public/
│   └── src/
│       ├── main.js
│       ├── App.vue
│       ├── style.css
│       ├── components/
│       │   └── HelloWorld.vue
│       ├── router/           # Si Vue Router est activé
│       │   └── index.js
│       ├── views/            # Si Vue Router est activé
│       │   ├── Home.vue
│       │   ├── About.vue
│       │   ├── NotFound.vue
│       │   └── ErrorPage.vue
│       └── store/            # Si Pinia est activé
│           └── index.js
└── static/
    └── build/
        └── (assets compilés en production)

Exemples

Configuration d'une application Flask avec Flask-Vue:

# app.py
from flask import Flask, render_template
from flask_vue import Vue

app = Flask(__name__)
vue = Vue(
    app,
    dev_server_url="http://localhost:5173",
    plugins={
        'vue_router': True,
        'pinia': True
    }
)

@app.route('/')
@app.route('/<path:path>')
def index(path=None):
    """Toutes les routes sont gérées par Vue Router"""
    return render_template('index.html')

@app.route('/api/hello')
def hello_api():
    """API Flask pour être consommée par Vue"""
    return {
        'message': 'Bonjour depuis Flask!',
        'status': 'success'
    }

if __name__ == '__main__':
    app.run(debug=True)

Template Flask avec vérification des plugins:

<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask-Vue App</title>
    {{ vue_hmr() }}
    {{ vue_css('main.css') }}
</head>
<body>
    <div id="app"></div>
    {{ vue_js('main.js') }}
    
    {% if vue_has_router() %}
    <!-- Configuration spécifique pour Vue Router si besoin -->
    <script>
        console.log('Vue Router est activé');
    </script>
    {% endif %}
</body>
</html>

FAQ

Q: Comment gérer les requêtes API entre Flask et Vue? R: Utilisez le module fetch pour appeler des endpoints Flask depuis Vue. Les endpoints Flask doivent retourner des réponses JSON.

Q: Est-ce que les routes Flask sont nécessaires avec Vue Router? R: Vous avez besoin d'au moins une route Flask pour servir le template qui charge l'application Vue. Si vous utilisez Vue Router en mode history, vous devez également configurer Flask pour rediriger toutes les routes inconnues vers ce template.

Q: Comment déployer une application Flask-Vue en production? R: Exécutez flask vue build pour compiler les assets Vue, puis déployez votre application Flask normalement. Assurez-vous que dev_mode=False dans la configuration de l'extension.

Dépannage

Le serveur de développement ne démarre pas

Vérifiez que Node.js et npm sont installés:

node -v
npm -v

Les styles ne sont pas chargés en production

Vérifiez que le build a été correctement généré:

flask vue build

Et que les fichiers CSS existent dans static/build/.

Les routes Vue Router ne fonctionnent pas

Assurez-vous que votre application Flask est configurée pour rediriger toutes les routes vers votre template principal:

@app.route('/')
@app.route('/<path:path>')
def index(path=None):
    return render_template('index.html')

Contribuer

Les contributions sont les bienvenues! Voici comment vous pouvez contribuer:

Fork le dépôt
Créez une branche pour votre fonctionnalité (git checkout -b feature/amazing-feature)
Committez vos changements (git commit -m 'Add some amazing feature')
Pushez vers la branche (git push origin feature/amazing-feature)
Ouvrez une Pull Request

Licence

MIT

Project details

These details have not been verified by PyPI

Project links

Release history Release notifications | RSS feed

0.1.1

Mar 24, 2025

This version

0.1.0

Mar 24, 2025

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

flask_vue3-0.1.0.tar.gz (15.2 kB view details)

Uploaded Mar 24, 2025 Source

Built Distribution

If you're not sure about the file name format, learn more about wheel file names.

The dropdown lists show the available interpreters, ABIs, and platforms. Enable javascript to be able to filter the list of wheel files.

flask_vue3-0.1.0-py3-none-any.whl (17.2 kB view details)

Uploaded Mar 24, 2025 Python 3

File details

Details for the file flask_vue3-0.1.0.tar.gz.

File metadata

Download URL: flask_vue3-0.1.0.tar.gz
Upload date: Mar 24, 2025
Size: 15.2 kB
Tags: Source
Uploaded using Trusted Publishing? No
Uploaded via: twine/6.1.0 CPython/3.13.1

File hashes

Hashes for flask_vue3-0.1.0.tar.gz
Algorithm	Hash digest
SHA256	`c73b8c6c8a2f469e26726e7c0317f799b2b7a5f8fb132e66685ce107587711a3`
MD5	`56dd566d211656a544c839c19c8cc4a9`
BLAKE2b-256	`3e0d243795d2fc80a7864ec26cda1428fca338b5e886c5f3415a42ff4e37b12b`

See more details on using hashes here.

File details

Details for the file flask_vue3-0.1.0-py3-none-any.whl.

File metadata

Download URL: flask_vue3-0.1.0-py3-none-any.whl
Upload date: Mar 24, 2025
Size: 17.2 kB
Tags: Python 3
Uploaded using Trusted Publishing? No
Uploaded via: twine/6.1.0 CPython/3.13.1

File hashes

Hashes for flask_vue3-0.1.0-py3-none-any.whl
Algorithm	Hash digest
SHA256	`eb55d5a51e1b3a413e6c9236b3353c276f3c7ee57ff7a94e6451259f226635f5`
MD5	`38252519d2ffccb75451d0ec3570e4f1`
BLAKE2b-256	`f44725a84419e810c39513038092d3ae87423b1b9daa48507ad008bbb4aa5011`

See more details on using hashes here.

Flask-Vue3 0.1.0

Navigation

Verified details

Maintainers

Unverified details

Project links

Meta

Classifiers

Project description

Flask-Vue

Table des matières

Caractéristiques

Installation

Démarrage rapide

Configuration

Utilisation

Commandes CLI

Helpers Jinja

Modes de développement et production

Plugins Vue

Vue Router

Pinia (Store)

Architecture

Exemples

Configuration d'une application Flask avec Flask-Vue:

Template Flask avec vérification des plugins:

FAQ

Dépannage

Le serveur de développement ne démarre pas

Les styles ne sont pas chargés en production

Les routes Vue Router ne fonctionnent pas

Contribuer

Licence

Project details

Verified details

Maintainers

Unverified details

Project links

Meta

Classifiers

Release history Release notifications | RSS feed

Download files

Source Distribution

Built Distribution

File details

File metadata

File hashes

File details

File metadata

File hashes