Add StyledLink

vue/src/components/StyledLink.vue

@@ -0,0 +1,16 @@
+<template>
+  <router-link :to="to" :class="{ selected }">
+    <slot></slot>
+  </router-link>
+</template>
+
+<script setup>
+
+import { computed, defineProps } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const props = defineProps(['to'])
+const selected = computed(() => props.to !== '/' ? route.path.startsWith(props.to) : route.path === props.to, [route.path])
+
+</script>

vue/src/main.js

@@ -24,7 +24,7 @@ const routes = [
     path: '/user',
     component: UserView,
     children: [
-      { path: '', name: 'user', component: UserHome },
+      { path: 'settings', name: 'user', component: UserHome },
       { path: 'invoices', name: 'invoices', component: UserInvoices }
     ]
   },

vue/src/views/UserView.vue

@@ -11,8 +11,8 @@
   <!-- eslint-enable -->
   <header class="flex flex-row text-center justify-center pt-1">
     <nav>
-      <router-link to="/user">settings</router-link>
-      <router-link to="/user/invoices">invoices</router-link>
+      <StyledLink to="/user/settings">settings</StyledLink>
+      <StyledLink to="/user/invoices">invoices</StyledLink>
     </nav>
   </header>
   <Suspense>
@@ -20,6 +20,10 @@
   </Suspense>
 </template>
 
+<script setup>
+import StyledLink from '@/components/StyledLink'
+</script>
+
 <style scoped>
 nav {
   display: flex;