@extends('documentation.application.squelette') @section('titre') {{ __("Guide Technique PWA") }} @endsection @section('menu')
  • Installation
  • Configuration
  • Structure du projet
  • Environnements
  • Ressources et Liens Utiles
    • @endsection @section('contenu')

    Installation

    1. Création du projet Vue 3

    @verbatim 
    npm create @vite-pwa/pwa@latest my-vue-app -- --template vue
    @endverbatim

    2. Installation des dépendances principales

    
npm install pinia vue-router@4 axios
npm install -D tailwindcss postcss autoprefixer
npm install pinia-plugin-persistedstate
npm install @fortawesome/fontawesome-free
npx shadcn-vue@latest init

    Configuration

    Vite PWA Configuration

    Configuration dans vite.config.ts

    
import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig({
    plugins: [vue(), VitePWA({
        registerType: 'prompt',
        injectRegister: false,
        pwaAssets: {
            disabled: false,
            config: true,
        },
        // ... reste de la configuration
    })]
})

    Configuration des URLs API

    
const getApiUrl = () => {
    if (import.meta.env.DEV) {
        return import.meta.env.VITE_API_URL;
    }
    
    const hostname = window.location.hostname;
    const domainMappings = {
        'application.demo-elanmaintenance.com': 'https://application-back.demoelan.com/api',
    };
    
    return domainMappings[hostname] || 'https://application-back.demoelan.com/api';
};

    Structure du projet

    
project/
├── src/
│   ├── assets/          # Images, icônes, etc.
│   ├── components/      # Composants Vue
│   ├── stores/          # Stores Pinia
│   ├── views/           # Pages de l'application
│   ├── router/          # Configuration des routes
│   ├── App.vue          # Composant racine
│   └── main.ts         # Point d'entrée
├── public/             # Fichiers statiques
└── vite.config.ts     # Configuration Vite

    Environnements

    Environnement Frontend (PWA) Backend (API) Variables
    Production o2switch/Ionos Serveur dédié Ionos .env.production
    Développement localhost:3000 localhost:8000 .env.development

    Variables d'environnement

    
# .env.development
VITE_API_URL=http://localhost:8000/api

# .env.production
VITE_API_URL=https://application-back.demoelan.com/api

    Ressources et Liens Utiles

    Documentation Officielle

    Frontend
    Backend

    Outils et Packages

    Package Version Description Lien
    vite-plugin-pwa version Plugin Vite pour PWA Documentation
    @fortawesome/fontawesome-free version Icônes Font Awesome Site Web
    pinia-plugin-persistedstate version Persistence pour Pinia Documentation
    axios version Client HTTP Documentation

    Extensions VS Code Recommandées

    Développement Vue/TypeScript
    • Volar - Vue Language Features
    • TypeScript Vue Plugin
    • ESLint
    • Prettier
    Outils PWA
    • PWA Tools
    • Live Server
    • REST Client
    @endsection