Version upgrade.

src/App.vue

@@ -1,53 +1,8 @@
 <template>
-  <div id="app" class="container">
-    <div v-if="loading"><progress class="progress is-small is-primary" max="100">15%</progress></div>
-    <div v-show="!loading">
-      <Login v-if="!authed" v-on:login="handleLoggedIn" v-on:loading="handleLoading"></Login>
-      <div v-if="authed">
-        <div class="notification is-success" v-if="!hideAuthed">
-          <button class="delete" v-on:click="hideAuthed = true"></button>
-          Authed !
-        </div>
-        <Lists></Lists>
-      </div>
-    </div>
-  </div>
+  <router-view/>
 </template>
 
-<script>
-
-import Login from "@/components/Login";
-import Lists from "@/components/Lists";
-export default {
-  name: 'App',
-  components: {
-    Lists,
-    Login
-  },
-  data: function() {
-    return {
-      authed: false,
-      loading: false,
-      hideAuthed: false,
-      lists: []
-    }
-  },
-  methods: {
-    handleLoggedIn: function () {
-      this.authed = true;
-      this.loading = false;
-      setTimeout(() => {
-        this.hideAuthed = true;
-      }, 3000)
-    },
-    handleLoading: function (event) {
-      this.loading = event;
-    }
-  }
-}
-</script>
-
-<style>
+<style lang="scss">
 @import "~bulma/css/bulma.css";
 
 #app {
@@ -56,6 +11,18 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
+}
+
+#nav {
+  padding: 30px;
+
+  a {
+    font-weight: bold;
+    color: #2c3e50;
+
+    &.router-link-exact-active {
+      color: #42b983;
+    }
+  }
 }
 </style>

src/main.js

@@ -1,8 +0,0 @@
-import Vue from 'vue'
-import App from './App.vue'
-
-Vue.config.productionTip = false
-
-new Vue({
-  render: h => h(App),
-}).$mount('#app')

src/main.ts

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+
+createApp(App).use(router).mount('#app')

src/router/index.ts

@@ -0,0 +1,22 @@
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
+import Login from '../views/Login.vue'
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    name: 'Login',
+    component: Login
+  },
+  {
+    path: '/lists',
+    name: 'Lists',
+    component: () => import('../views/Lists.vue')
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes
+})
+
+export default router

src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

src/views/Lists.vue

@@ -38,7 +38,7 @@
 </template>
 
 <script>
-import ListCreateUpdateModal from "@/components/ListCreateUpdateModal";
+import ListCreateUpdateModal from "../../../liste-de-courses-www/src/components/ListCreateUpdateModal";
 export default {
   name: "Lists",
   components: {ListCreateUpdateModal},

src/views/Login.vue

@@ -1,4 +1,5 @@
 <template>
+  <div v-if="loading"><progress class="progress is-small is-primary" max="100">15%</progress></div>
   <div class="box">
     <div class="field">
       <label class="label">Key</label>
@@ -15,6 +16,7 @@ export default {
   name: "Login",
   data: function () {
     return {
+      loading: false,
       key: '',
       lsKey: 'KEY'
     }
@@ -28,16 +30,17 @@ export default {
         },
         body: this.key
       }).then(r => {
-        if (r.status !== 404) {
-          localStorage.setItem(this.lsKey, this.key)
-          this.$emit('login')
-        } else {
-          this.$emit('loading')
-        }
+        setTimeout(() => {
+          if (r.status !== 404) {
+            localStorage.setItem(this.lsKey, this.key)
+            this.$router.push('/lists')
+          }
+          this.loading = false;
+        }, 2000);
       })
     }
   }, beforeMount() {
-    this.$emit('loading', true)
+    this.loading = true;
     this.key = localStorage.getItem(this.lsKey) != 'null' ? localStorage.getItem(this.lsKey) : '';
     this.sendKey();
   }