fix: wrap with div if root element is NuxtLayout to avoid navigation error

packages/nc-gui/layouts/general.vue

@@ -5,7 +5,9 @@ export default {
 </script>
 
 <template>
+  <div>
     <NuxtLayout name="default">
       <slot name="sidebar" />
     </NuxtLayout>
+  </div>
 </template>

packages/nc-gui/pages/account/index.vue

@@ -28,6 +28,7 @@ const logout = async () => {
 </script>
 
 <template>
+  <div>
     <NuxtLayout name="empty">
       <div class="mx-auto h-full">
         <div class="h-full overflow-y-auto flex">
@@ -199,6 +200,7 @@ const logout = async () => {
         </div>
       </div>
     </NuxtLayout>
+  </div>
 </template>
 
 <style lang="scss" scoped>

packages/nc-gui/pages/forgot-password.vue

@@ -61,6 +61,7 @@ function navigateSignIn() {
 </script>
 
 <template>
+  <div>
     <NuxtLayout>
       <div class="md:bg-primary bg-opacity-5 forgot-password h-full min-h-[600px] flex flex-col justify-center items-center">
         <div
@@ -96,7 +97,12 @@ function navigateSignIn() {
             </Transition>
 
             <a-form-item :label="$t('labels.email')" name="email" :rules="formRules.email">
-            <a-input v-model:value="form.email" size="large" :placeholder="$t('msg.info.signUp.workEmail')" @focus="resetError" />
+              <a-input
+                v-model:value="form.email"
+                size="large"
+                :placeholder="$t('msg.info.signUp.workEmail')"
+                @focus="resetError"
+              />
             </a-form-item>
 
             <div class="self-center flex flex-col gap-4 items-center justify-center w-full">
@@ -116,6 +122,7 @@ function navigateSignIn() {
         </div>
       </div>
     </NuxtLayout>
+  </div>
 </template>
 
 <style lang="scss">

packages/nc-gui/pages/index/[typeOrId]/form/[viewId].vue

@@ -62,6 +62,7 @@ watch(
 </script>
 
 <template>
+  <div>
     <NuxtLayout>
       <NuxtPage v-if="!passwordDlg" />
 
@@ -94,6 +95,7 @@ watch(
         </div>
       </a-modal>
     </NuxtLayout>
+  </div>
 </template>
 
 <style lang="scss" scoped>

packages/nc-gui/pages/profile/[[username]].vue

@@ -11,6 +11,7 @@ await loadProfile(route.params.username as string)
 </script>
 
 <template>
+  <div>
     <NuxtLayout>
       <a-layout class="h-[75vh] overflow-y-auto flex">
         <a-layout-sider :collapsed="false" width="320" class="h-max px-5" :trigger="null" collapsible theme="light">
@@ -72,7 +73,9 @@ await loadProfile(route.params.username as string)
             <div v-if="profile.website" class="nc-profile-website my-2">
               <div class="flex items-center mr-4">
                 <MdiLinkVariant class="text-lg mr-2" />
-              <a class="!no-underline" :href="profile.website" rel="noopener noreferrer" target="_blank">{{ profile.website }}</a>
+                <a class="!no-underline" :href="profile.website" rel="noopener noreferrer" target="_blank">{{
+                  profile.website
+                }}</a>
               </div>
             </div>
 
@@ -160,4 +163,5 @@ await loadProfile(route.params.username as string)
         </a-layout-content>
       </a-layout>
     </NuxtLayout>
+  </div>
 </template>

packages/nc-gui/pages/projects/index.vue

@@ -57,6 +57,7 @@ const deleteProject = (base: BaseType) => {
 </script>
 
 <template>
+  <div>
     <NuxtLayout>
       <template #sidebar>
         <div class="flex flex-col h-full">
@@ -141,4 +142,5 @@ const deleteProject = (base: BaseType) => {
 
       <a-modal></a-modal>
     </NuxtLayout>
+  </div>
 </template>

packages/nc-gui/pages/reset/[id].vue

@@ -61,8 +61,11 @@ function resetError() {
 </script>
 
 <template>
+  <div>
     <NuxtLayout>
-    <div class="md:bg-primary signin bg-opacity-5 forgot-password h-full min-h-[600px] flex flex-col justify-center items-center">
+      <div
+        class="md:bg-primary signin bg-opacity-5 forgot-password h-full min-h-[600px] flex flex-col justify-center items-center"
+      >
         <div
           class="bg-white mt-[60px] relative flex flex-col justify-center gap-2 w-full max-w-[500px] mx-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
         >
@@ -127,6 +130,7 @@ function resetError() {
         </div>
       </div>
     </NuxtLayout>
+  </div>
 </template>
 
 <style lang="scss">

packages/nc-gui/pages/signin.vue

@@ -92,6 +92,7 @@ function navigateForgotPassword() {
 </script>
 
 <template>
+  <div>
     <NuxtLayout>
       <div
         data-testid="nc-form-signin"
@@ -200,6 +201,7 @@ function navigateForgotPassword() {
         </div>
       </div>
     </NuxtLayout>
+  </div>
 </template>
 
 <style lang="scss">

packages/nc-gui/pages/signup/[[token]].vue

@@ -127,6 +127,7 @@ onMounted(async () => {
 </script>
 
 <template>
+  <div>
     <NuxtLayout>
       <div class="md:bg-primary bg-opacity-5 signup h-full min-h-[600px] flex flex-col justify-center items-center">
         <div
@@ -245,6 +246,7 @@ onMounted(async () => {
         </div>
       </div>
     </NuxtLayout>
+  </div>
 </template>
 
 <style lang="scss">