brick Posts - Answer Overflow

brick

•Created by brick on 9/17/2024 in #❓・help

Adding Types To Nuxt Module

I feel like I am missing something here so sorry if this is a dumb question... I am building a nuxt module that is a collection of components to use across multiple apps. I want to add a few interfaces (currently all stored in src/runtime/types/[project-name].ts) to the module so they are available in all components. I'm not sure I am wrapping my head around the "Adding Type Declarations" section of the module author guide. Any tips? Should I be using addTypeTemplate or am I going down the wrong path?

14 replies

NNuxt

•Created by brick on 4/26/2024 in #❓・help

Components changing as page transition starts instead of after leave

Hello! I have a component that renders different content based on a prop that I am passing into it from different pages. When I navigate from one page to another that both have the component (but different content because it's a different prop) the content changes before the page transition fadeout finishes, causing an undesirable jump of content on the page. Any ideas on how to solve this? I am using global page transitions as noted below

// 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 */

<style>
.page-enter-active,
.page-leave-active {
  transition: all 0.5s ease;
}
.page-enter-from,
.page-leave-to {
  opacity: 0;
}
</style>

/* app.vue */

<style>
.page-enter-active,
.page-leave-active {
  transition: all 0.5s ease;
}
.page-enter-from,
.page-leave-to {
  opacity: 0;
}
</style>

// component.vue

<script setup lang="ts">
  const props = defineProps(["tag"])
  const data = fetchSomething(props.tag)
</script>

<template>
  <div v-for="thing in data">
    {{ thing }}
  </div>
</template>

// component.vue

<script setup lang="ts">
  const props = defineProps(["tag"])
  const data = fetchSomething(props.tag)
</script>

<template>
  <div v-for="thing in data">
    {{ thing }}
  </div>
</template>

// page.vue

<template>
  <div>
    <component tag="something" />
  </div>
</template>

// page.vue

<template>
  <div>
    <component tag="something" />
  </div>
</template>

2 replies

Gaming

Programming