src/app/App.vue - dev - 45case/ptable

<script setup lang="ts">
import { provide, ref } from "vue";

import AppNavbar from "./AppNavbar.vue";

const searchQuery = ref("");
provide("searchQuery", searchQuery);

function onSearchQuery(value: string) {
  searchQuery.value = value;
}
</script>

<template>
  <div class="flex h-dvh flex-col overflow-hidden">
    <AppNavbar :search-query="searchQuery" @update:search-query="onSearchQuery" />

    <main class="flex min-h-0 min-w-0 flex-1 overflow-x-hidden overflow-y-auto">
      <RouterView v-slot="{ Component, route }">
        <KeepAlive :include="['PeriodicTableWorkspace']">
          <component
            :is="Component"
            :key="route.meta.workspace === 'periodic' ? 'periodic' : route.fullPath"
          />
        </KeepAlive>
      </RouterView>
    </main>
  </div>
</template>