Feat: basic routing

src/App.vue

@@ -1,16 +1,14 @@
 <template>
   <Nav></Nav>
-  <Content></Content>
+  <router-view></router-view>
 </template>
 
 <script>
-import Content from './components/content.vue'
 import Nav from './components/nav.vue'
 
 export default {
   name: 'App',
   components: {
-    Content,
     Nav
   }
 }

src/components/nav.vue

@@ -1,9 +1,7 @@
 <template>
   <nav>
-  <ul>
-      <li>Plop</li>
-      <li>Pipo</li>
-  </ul>
+  <router-link to="/"> Home </router-link>
+  <router-link to="/config"> Config </router-link>
   </nav>
 </template>
 

src/main.js

@@ -1,7 +1,8 @@
 import { createApp } from 'vue'
-import VueRouter from "vue-router"
-import App from './App.vue'
+import App from '@/App.vue'
+import router from '@/router'
 
-vue.use(VueRouter)
 
-createApp(App).mount('#app')
+const app = createApp(App)
+app.use(router)
+app.mount('#app')

src/router.js

@@ -0,0 +1,20 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+import Home from "@/views/home.vue"
+import Config from "@/views/config.vue"
+
+const routes = [
+    {
+        path: '/',
+        name: 'home',
+        component: Home
+    },
+    {
+        path: '/config',
+        name: 'config',
+        component: Config
+    }
+]
+
+const router = createRouter({ history: createWebHistory(), routes })
+export default router

src/views/config.vue

@@ -0,0 +1,3 @@
+<template>
+<h1>Config</h1>
+</template>

src/views/home.vue

@@ -0,0 +1,3 @@
+<template>
+<h1>Home</h1>
+</template>