Elementor – Nuxt3 – How to create a single page portfolio site where posts open in a div popup (no page reload), but each project has a unique url?

The suggestions of @lousolverson and @Mojtaba, and a lucky find of the term 'Modal' instead of what I called a 'popup', send me down a rabbit hole and I eventually was able to get the behavior that I want.

My solution builds further on my 1st attempt , but using the navigateTo composable of Nuxt3. This composable is a nicer way to programmatically change the url than the window.history.pushstate and also does not reload the page on url change.

The state of the postmodal is stored using the useState composable, which is false if the user is on the home page with the projectsgrid and the modal is closed. Then if the user clicks on a ProjectCard, then this state changes to the slug of the selected project and the projectModal will open with the content of the selected project.

If someone gets a url that directly leads to a project, then the onMounted() function will set the correct state and scroll the underlying page to the projectsgrid. Also, the url history is preserved. So, the site will give a fluent experience without page reloads, but supporting unique urls for each project.

Thank you for the suggestions and I hope someone else may find this useful! :)

app.vue

<script setup>
  const wordpress_host = 'http://localhost/wp-json/wp/v2'
  const { data:projects } = await useFetch(wordpress_host+'/posts');

  const route = useRoute();

  const showProjectModal = useState('showProjectModal', () => false);

  onMounted(() => {
    if (route.params.slug) {
      showProjectModal.value = route.params.slug[0];
      document.getElementById('projects').scrollIntoView({ behavior: 'smooth' });
    }
  });
</script>

<template>
  <main class="bg-black text-white"> 
    <div id="page-wrapper" class="h-screen w-screen overflow-scroll" :class="{ 'overflow-hidden blur-sm': showProjectModal }">

      <section id="hero" class="relative h-screen w-screen">...</section>
      <section id="about" class="w-screen py-12">...</section>

      <section id="projects" class="w-screen py-12 sm:px-2">
        <div class="min-w-screen-lg grid 2xl:grid-cols-6 xl:grid-cols-4 md:grid-cols-3 sm:grid-cols-2 grid-cols-1">
          <PostCard v-for="project,index in projects" :key="'project'+index" v-bind:project="project" v-bind:wordpress_host="wordpress_host" />
        </div>

      </section>

    </div>
      <ProjectModal :project="projects.find(project => { return project.slug === showProjectModal })" :wordpress_host="wordpress_host" />
  </main>
</template>

components/ProjectCard.vue

<script setup>
  const props = defineProps(['project', 'wordpress_host']);

  const showProjectModal = useState('showProjectModal', () => false);
  const openProjectModal = (slug) => {
    showProjectModal.value = slug;
    navigateTo(`/project/${slug}`);
  };
</script>

<template>
  <article>
    <div class="relative aspect-square">
      <img :src="..." />
      <div @click="openProjectModal(props.project.slug)" class="p-4 absolute h-full inset-0 bg-gray-700 cursor-pointer hover:bg-black/60"">
       ... card content overlayed on top of image ...
      </div>
    </div>
  </article>
</template>

components/ProjectModal.vue

<template>
  <div>
    <transition
        enter-active-class="transition-opacity duration-200 ease-out"
        enter-from-class="opacity-0"
        enter-to-class="opacity-100"
        leave-active-class="transition-opacity duration-100 ease-in"
        leave-from-class="opacity-100"
        leave-to-class="opacity-0"
    >
    <div id="projectmodal-overlay" v-show="showProjectModal" class="fixed inset-0 z-50 grid place-items-center w-screen h-screen bg-black/80 px-2 py-4 md:px-16 md:py-9 lg:px-32 lg:py-18">
      <div id="projectmodal-modalbox" class="w-full h-full m-auto flex flex-col overflow-hidden">
        <header class="bg-gray-900 h-16 px-4">
          <button @click="closeProjectModal()" class="h-full text-4xl">&#10005</button>
        </header>
        <div id="projectmodal-contentbox" v-if="showProjectModal">
          ... <!-- v-if needed when using transitions, because the url will already change and so the content is removed before the transition is done, which may result in errors -->
        </div>
      </div>
    </div>
    </transition>
  </div>
</template>

<script setup>
  const props = defineProps(['project', 'wordpress_host']);

  const route = useRoute();
  const showProjectModal = useState('showProjectModal', () => false);
  const closeProjectModal = () => {
    showProjectModal.value = false;
    navigateTo(`/`);
  };
</script>