app_rappel_mobilite

Application Vue 3 + TypeScript pour la gestion des rappels de mobilité.

This template should help get you started developing with Vue 3 in Vite.

Stack Technique

• Vue 3 - Framework JavaScript progressif
• TypeScript - Superset typé de JavaScript
• Vite - Build tool et serveur de développement
• Pinia - Store management officiel pour Vue 3
• Vue Router - Routage côté client
• Vitest - Framework de test unitaire

Gestion d'État avec Pinia

Ce projet utilise Pinia comme solution de gestion d'état. Pinia est le store officiel pour Vue 3 qui remplace Vuex.

Configuration

Pinia est configuré dans src/main.ts :

import { createPinia } from 'pinia'
app.use(createPinia())

Stores Disponibles

Counter Store (src/stores/counter.ts)

Store d'exemple utilisant la Composition API :

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  
  function increment() {
    count.value++
  }

  return { count, doubleCount, increment }
})

Utilisation dans les Composants

Pour utiliser un store dans un composant :

<script setup>
import { useCounterStore } from '@/stores/counter'

const store = useCounterStore()
</script>

<template>
  <div>
    <p>Count: {{ store.count }}</p>
    <button @click="store.increment()">Increment</button>
  </div>
</template>

Exemple d'Implémentation

Voir src/views/HomeView.vue pour un exemple concret d'utilisation du store Pinia dans un composant.

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Capacitor Setup

npm i @capacitor/core
npm i -D @capacitor/cli
npx cap init
npm i @capacitor/android @capacitor/ios
npx cap add android
npx cap add ios
npm install @capacitor/local-notifications
npm run build
npx cap sync

Compile and run with capacitor

# Build the Vue app
npm run build
# Copy web assets to native platforms and sync plugins
npx cap sync
# Run the native app on Android or iOS
npx cap run android # or ios

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test:unit

Lint with ESLint

Handle lint in eslint.config.ts

# To check files with lint rules
npm run lint
# To fix files with lint rules
npm run lint -- --fix

Generate basic assets

# This package allow you to create assets easily, but it's better have real assets with every sizes
# Install the package that will generate all sizes needed
npm install @capacitor/assets --save-dev
# Create a resources folder and add an image inside and then generate all images needed
npx capacitor-assets generate

Links

See Capacitor See Notifications