Vite / Vue 3 script setup / Pinia migration (#28)

* migrating to vite and vue latest version

* script setup component migration

* fix lint

* updating deps

* replacing vuex by pinia 🍍

* api refacto

Author: fatb38

.eslintrc.json

@@ -0,0 +1,10 @@
+{
+  "root": true,
+  "extends": [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 2022
+  }
+}

README.md

@@ -12,27 +12,27 @@ npm run serve
 
 - Framework: [Vue](https://v3.vuejs.org/guide) 
 - Router: [Vue Router](https://router.vuejs.org/)
-- State management: [Vuex](https://vuex.vuejs.org/)
+- State management: [Pinia](https://pinia.vuejs.org/)
 - Weather data: [7timer](http://www.7timer.info/)
-- Build tools: [Vue CLI](https://cli.vuejs.org/guide/)
+- Build tools: [Vite](https://vitejs.dev/)
 - CSS: [Bulma](https://bulma.io/documentation/)
 
 ### Customize configuration
 
-See [Configuration Reference](https://cli.vuejs.org/config/).
+See [Configuration Reference](https://vitejs.dev/config/).
 
 ## Step 1 : Afficher la météo du jour pour Grenoble
 
 - Sur la page d’une ville : récupérer et afficher la météo du jour
-- La page d’une ville correspond au composant [`City`](src/views/City.vue) 
-- Utiliser le [service d’API](src/api/weather.api.js) pour récupérer la météo en function des coordonnées GPS de Grenoble lorsque le composant est créé (https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks)
-- Binder les données de la météo du jour avec le template (https://vuejs.org/v2/guide/instance.html#Data-and-Methods)
+- La page d’une ville correspond au composant [`CityView`](src/views/CityView.vue) 
+- Utiliser le [service d’API](src/api/weather.api.js) pour récupérer la météo en function des coordonnées GPS de Grenoble lorsque le composant est créé (https://vuejs.org/guide/essentials/lifecycle)
+- Binder les données de la météo du jour avec le template (https://vuejs.org/guide/essentials/reactivity-fundamentals)
 
 ## Step 2 : Afficher la météo du jour pour toutes les villes Zenika
 
-- Pour le moment on affiche uniquement la première ville de la liste dans le composant [`Home`](src/views/Home.vue), itérer sur la liste pour toutes les afficher (https://vuejs.org/v2/guide/list.html) 
-- Le paramètre de la route `/city` est mappé sur les props du composant que l’on peut récupérer avec `this.cityName`
-- Utiliser les getters `Vuex` pour récupérer les coordonnées de la ville : `[latitude, longitude]` (https://vuex.vuejs.org/guide/getters.html)
+- Pour le moment on affiche uniquement la première ville de la liste dans le composant [`HomeView`](src/views/HomeView.vue), itérer sur la liste pour toutes les afficher (https://vuejs.org/guide/essentials/list) 
+- Le paramètre de la route `/city` est mappé sur les props du composant que l’on peut récupérer avec `props.cityName`
+- Utiliser les getters du store `Pinia` pour récupérer les coordonnées de la ville : `[latitude, longitude]` (https://pinia.vuejs.org/core-concepts/getters)
 - Appeler le service d'API avec les coordonnées de la ville
 - Afficher la ville sur la carte et la météo du jour
 
@@ -44,21 +44,21 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
 ## Step 4 : Avoir la possibilité de passer en Fahrenheit
 
 - Ajouter des radios boutons, checkbox ou n’importe quoi d’autre pour choisir l’unité à afficher 
-- Créer une méthode VueJS pour retourner les degrees dans la bonne unité (https://vuejs.org/v2/api/#methods)
+- Créer un `Composable` VueJS pour retourner les degrees dans la bonne unité (https://vuejs.org/guide/reusability/composables)
 - Appliquer la fonction de conversion `F = C * 9/5 + 32`
 
 ## Step 5 : Ajouter un page pour enregistrer une nouvelle ville
 
 - Créer un nouveau composant dans le dossier `views`
 - Créer dans le router une route liée à ce composant 
-- Modifier le store pour créer une action et une mutation pour ajouter la nouvelle ville à la liste existante (https://vuex.vuejs.org/guide/actions.html)
-- Créer un formulaire avec des inputs pour le nom de la vile, latitude et longitude
+- Modifier le store pour créer une action pour ajouter la nouvelle ville à la liste existante (https://pinia.vuejs.org/core-concepts/actions)
+- Créer un formulaire avec des inputs pour le nom de la ville, latitude et longitude
 - Mettre des protections sur les inputs (non vide, entre -180 et 180…)
 - Dispatcher l’action créée précédemment lors de l’envoi du formulaire valide
 
-## Bonus : Afficher la météo détaillée d'un ville
+## Bonus : Afficher la météo détaillée d'une ville
 
-- Une seconde API sur `7timer` permet d'obtenir une météo plus détaillée avec une prévision toute les 3 heures (http://www.7timer.info/bin/civil.php?lon=0&lat=0&unit=metric&output=json)
+- Une seconde API sur `7timer` permet d'obtenir une météo plus détaillée avec une prévision toutes les 3 heures (http://www.7timer.info/bin/civil.php?lon=0&lat=0&unit=metric&output=json)
 - Créer un nouveau point d'entrée sur le service d'api pour consommer ces données
 - Afficher le résultat de la météo détaillée sur la page de la ville
 - Ajouter un bouton pour afficher le mode simple ou le mode détaillé

babel.config.js

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <link rel="icon" href="/favicon.ico">
+  <title>Météo Zenika Vue3/Vite</title>
+  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
+        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
+        crossorigin="" />
+</head>
+<body>
+<noscript>
+  <strong>We're sorry but Météo Zenika Vue3/Vite doesn't work properly without
+    JavaScript enabled. Please enable it to continue.</strong>
+</noscript>
+<div id="app"></div>
+<script type="module" src="/src/main.js"></script>
+</body>
+</html>