Nuxt•2d ago

Please help me finish this Portfolio Template.

I'm about to finish my first Nuxt UI Project, which of course will be my own website. Inspired by this page: https://ui.nuxt.com/pro/templates It's already publically available, but needs a little finish before showcasing. I struggle mainly with Navigation and Page Transitions (also tried to use view-transitions for projects, but no success) +++Nav-Links broken +++Pages don't open at top DEMO: https://biereth.de (german - gonna add translation when fixed) every advice is highly apprecciated. thanks in advance. https://github.com/louzed/nuxt-ui-portfolio p.s. don't laugh at project page code, they will get props soon 😄

2 Replies

kapa.ai•2d ago

Hi @Lou-Z. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You're on the right track with your Nuxt UI portfolio! Here are some focused suggestions based on your issues with navigation and page transitions, using the official Nuxt and Nuxt UI documentation: --- 1. Navigation Issues Nav-Links Broken:
If your navigation links are not working as expected, ensure you are using the Nuxt UI NavigationMenu or Link components, which are wrappers around <NuxtLink> and provide extra props for better integration. Example usage:

<template>
  <UNavigationMenu :links="[
    { label: 'Home', to: '/' },
    { label: 'Projects', to: '/projects' },
    { label: 'About', to: '/about' }
  ]" />
</template>

<template>
  <UNavigationMenu :links="[
    { label: 'Home', to: '/' },
    { label: 'Projects', to: '/projects' },
    { label: 'About', to: '/about' }
  ]" />
</template>

This ensures your links are handled by Nuxt's router and benefit from SPA navigation (no full reloads) NavigationMenu docs. --- 2. Page Transitions Pages Don't Open at Top:
By default, Nuxt scrolls to the top on navigation, but if you use modals or overlays for project details (as in your case), you may want to preserve scroll position. A common approach is to use a modal component and manage its open/close state with Nuxt's useState and navigateTo composables. This allows you to update the URL without a full reload and keep the scroll position, as described in this Stack Overflow answer: - Use navigateTo to update the URL when opening a project modal. - Store the modal state with useState. - On direct navigation to a project, use onMounted to set the correct state and scroll to the project grid. --- 3. View Transitions View-Transitions Not Working:
Nuxt 3 supports the View Transitions API as an experimental feature. To enable it, add this to your nuxt.config.ts:

export default defineNuxtConfig({
  experimental: {
    viewTransition: true
  }
})

export default defineNuxtConfig({
  experimental: {
    viewTransition: true
  }
})

Note: This feature requires browser support and may not work in all environments. --- 4. Page Transition Animations To add smooth transitions between pages, use the pageTransition property in your nuxt.config.ts and add CSS in your app.vue:

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    pageTransition: { name: 'page', mode: 'out-in' }
  }
})

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    pageTransition: { name: 'page', mode: 'out-in' }
  }
})

<!-- app.vue -->
<template>
  <NuxtPage />
</template>

<style>
.page-enter-active,
.page-leave-active {
  transition: all 0.4s;
}
.page-enter-from,
.page-leave-to {
  opacity: 0;
  filter: blur(1rem);
}
</style>

<!-- app.vue -->
<template>
  <NuxtPage />
</template>

<style>
.page-enter-active,
.page-leave-active {
  transition: all 0.4s;
}
.page-enter-from,
.page-leave-to {
  opacity: 0;
  filter: blur(1rem);
}
</style>

You can also set custom transitions per page using definePageMeta Nuxt Transitions. --- 5. Navigation Components Consider using Nuxt UI's navigation components for a polished look and better UX: - NavigationMenu for main navigation - Breadcrumb for hierarchical navigation - Pagination for paged content See the full list and usage examples here: Nuxt UI Navigation Components. --- Summary:
- Use Nuxt UI navigation components for robust links. - Manage modal/project state with useState and navigateTo for SPA-like behavior. - Enable and test the View Transitions API if you want native-like transitions. - Add or customize page transitions with CSS and Nuxt config. If you need more specific help, feel free to share a code snippet of your navigation or modal logic! --- Viel Erfolg mit deinem Portfolio! 🚀 ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

<@357281657604145152> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Please help me finish this Portfolio Template.

Did you find this page helpful?