N
Nuxt•2w ago
Jonas

Is it possible to make a Promise globally available on every page?

I want to have access to a Promise on every page because I need to see, if the action is done yet, on other pages. I am using vue-sonner with toast.promise. The problem: I want to create a toast using a composable and the promise state should be reflected on other pages too, but it seems like the Promise is only active and resolvable on that page, where it is created. The promise is pending till I move back to the page, where it was created. Is this even possible?
15 Replies
kapa.ai
kapa.ai•2w ago
Hi @Jonas. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To make a Promise globally available on every page in a Nuxt application, you can use the useNuxtApp() composable to access the shared runtime context. This allows you to store and access the Promise across different pages and components. Here's how you can achieve this: 1. Create a plugin to provide the Promise globally: 
// plugins/globalPromise.ts
export default defineNuxtPlugin((nuxtApp) => {
  const globalPromise = ref(null)

  nuxtApp.provide('globalPromise', {
    set: (promise) => globalPromise.value = promise,
    get: () => globalPromise.value
  })
})
// plugins/globalPromise.ts
export default defineNuxtPlugin((nuxtApp) => {
  const globalPromise = ref(null)

  nuxtApp.provide('globalPromise', {
    set: (promise) => globalPromise.value = promise,
    get: () => globalPromise.value
  })
})
2. Use the global Promise in your composable: 
// composables/useGlobalToast.ts
export const useGlobalToast = () => {
  const nuxtApp = useNuxtApp()
  const toast = useToast()

  const showPromiseToast = (promise, options) => {
    nuxtApp.$globalPromise.set(promise)
    return toast.promise(promise, options)
  }

  return {
    showPromiseToast
  }
}
// composables/useGlobalToast.ts
export const useGlobalToast = () => {
  const nuxtApp = useNuxtApp()
  const toast = useToast()

  const showPromiseToast = (promise, options) => {
    nuxtApp.$globalPromise.set(promise)
    return toast.promise(promise, options)
  }

  return {
    showPromiseToast
  }
}
3. Use the composable in your pages/components: 
<script setup>
const { showPromiseToast } = useGlobalToast()

const handleAction = () => {
  const promise = new Promise((resolve) => {
    setTimeout(resolve, 3000)
  })
  
  showPromiseToast(promise, {
    loading: 'Loading...',
    success: 'Action completed!',
    error: 'An error occurred'
  })
}
</script>
<script setup>
const { showPromiseToast } = useGlobalToast()

const handleAction = () => {
  const promise = new Promise((resolve) => {
    setTimeout(resolve, 3000)
  })
  
  showPromiseToast(promise, {
    loading: 'Loading...',
    success: 'Action completed!',
    error: 'An error occurred'
  })
}
</script>
4. Access the Promise state on other pages: 
<script setup>
const nuxtApp = useNuxtApp()

const checkPromiseState = () => {
  const promise = nuxtApp.$globalPromise.get()
  if (promise) {
    // Check the state of the promise
    // You can use Promise methods like .then(), .catch(), etc.
  }
}
</script>
<script setup>
const nuxtApp = useNuxtApp()

const checkPromiseState = () => {
  const promise = nuxtApp.$globalPromise.get()
  if (promise) {
    // Check the state of the promise
    // You can use Promise methods like .then(), .catch(), etc.
  }
}
</script>
This approach allows you to create a globally accessible Promise that can be used with vue-sonner's toast.promise and be reflected across different pages. However, it's important to note that this solution comes with some caveats: 1. The Promise state will not persist across page reloads or hard navigations. 2. You need to be careful about managing the lifecycle of the global Promise to avoid unexpected behavior. For a more robust solution, you might want to consider using state management libraries like Pinia, which can provide a more structured way to handle global state across your Nuxt application. Nuxt Docs: useNuxtApp provides more information on using the shared runtime context in Nuxt applications. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2w ago
<@507643246902640641> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Jonas
JonasOP•2w ago
@kapa.ai 'nuxtApp.$globalPromise' is of type 'unknown'.ts(18046) @kapa.ai I put the plugin in "plugins" but the types are not available. 'nuxtApp.$globalPromise' is of type 'unknown'.ts(18046) @kapa.ai Could you help me with the plugins?
kapa.ai
kapa.ai•2w ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- Certainly! I'd be happy to help you with plugins in Nuxt. Plugins are an important part of Nuxt's architecture, allowing you to extend and customize your application's functionality. Could you please provide more specific details about what you'd like to know about plugins? For example, are you looking to create a new plugin, understand how to use existing plugins, or learn about a particular aspect of plugin functionality in Nuxt? Having more context will help me provide a more targeted and helpful answer based on the information available in the knowledge sources. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2w ago
<@507643246902640641> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Jonas
JonasOP•2w ago
. @kapa.ai What are _islandPromises?
kapa.ai
kapa.ai•2w ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- I apologize, but I don't have specific information about _islandPromises in the context of Nuxt based on the provided knowledge sources. The term doesn't appear in any of the documents I have access to. However, I can provide some related information about islands in Nuxt that might be helpful: Nuxt has an experimental feature called component islands, which can be enabled using the <NuxtIsland> component and .island.vue files. This feature is part of the server components functionality in Nuxt. Nuxt Docs: Experimental Features mentions that you can enable component islands support in your nuxt.config.ts file: 
export default defineNuxtConfig({
  experimental: {
    componentIslands: true // or 'local+remote'
  }
})
export default defineNuxtConfig({
  experimental: {
    componentIslands: true // or 'local+remote'
  }
})
The <NuxtIsland> component is used to render non-interactive components without client-side JavaScript. It's possible that _islandPromises might be related to this functionality, but I can't confirm this without more specific information. If you need more details about _islandPromises, you might want to check the latest Nuxt documentation or ask in the Nuxt community forums, as it could be a very recent addition or an internal implementation detail that isn't widely documented. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2w ago
<@507643246902640641> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Jonas
JonasOP•2w ago
@kapa.ai could I use nuxtApp._asyncDataPromises?
kapa.ai
kapa.ai•2w ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- While it's technically possible to access nuxtApp._asyncDataPromises, it's not recommended to directly use or manipulate internal properties of the Nuxt application. These internal properties are not part of the public API and may change without notice, potentially breaking your application in future updates. Instead, Nuxt provides official APIs for handling asynchronous data fetching. Here are some recommended approaches: 1. Use useAsyncData or useFetch composables: These are the preferred methods for fetching data in Nuxt 3. They provide a consistent way to handle asynchronous operations across your application. Nuxt Docs: useAsyncData provides detailed information on how to use this composable. 2. If you need to share data between pages, consider using the sharedPrerenderData experimental feature: This feature allows sharing payload data between prerendered pages, which can improve performance when using useAsyncData or useFetch to fetch the same data on different pages. Nuxt Docs: Experimental Features explains how to enable and use this feature. 3. For more control over the Nuxt application lifecycle, you can use Nuxt hooks: Hooks allow you to tap into various points of the Nuxt lifecycle, including data fetching stages. Nuxt Docs: NuxtApp shows how to use hooks within your Nuxt application. If you have a specific use case that you think requires access to _asyncDataPromises, it would be better to describe your goal. There's likely a more appropriate and supported way to achieve what you're trying to do without relying on internal properties. Remember, using internal properties like _asyncDataPromises directly can lead to unexpected behavior and make your code less maintainable in the long run. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2w ago
<@507643246902640641> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Jonas
JonasOP•2w ago
@kapa.ai I still have no idea of how to implement this.
kapa.ai
kapa.ai•2w ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- I apologize for not providing a clear implementation in my previous responses. Let me help you with a more concrete example of how to implement a globally accessible promise in Nuxt, based on your original requirement. Here's a step-by-step guide to implement this: 1. First, create a plugin to manage the global promise: 
// plugins/globalPromise.ts
export default defineNuxtPlugin(() => {
  const globalPromise = ref(null)

  return {
    provide: {
      setGlobalPromise: (promise) => globalPromise.value = promise,
      getGlobalPromise: () => globalPromise.value
    }
  }
})
// plugins/globalPromise.ts
export default defineNuxtPlugin(() => {
  const globalPromise = ref(null)

  return {
    provide: {
      setGlobalPromise: (promise) => globalPromise.value = promise,
      getGlobalPromise: () => globalPromise.value
    }
  }
})
2. Create a composable to use with vue-sonner: 
// composables/useGlobalToast.ts
import { toast } from 'vue-sonner'

export const useGlobalToast = () => {
  const nuxtApp = useNuxtApp()

  const showPromiseToast = (promiseFunction, options) => {
    const promise = promiseFunction()
    nuxtApp.$setGlobalPromise(promise)
    return toast.promise(promise, options)
  }

  return {
    showPromiseToast
  }
}
// composables/useGlobalToast.ts
import { toast } from 'vue-sonner'

export const useGlobalToast = () => {
  const nuxtApp = useNuxtApp()

  const showPromiseToast = (promiseFunction, options) => {
    const promise = promiseFunction()
    nuxtApp.$setGlobalPromise(promise)
    return toast.promise(promise, options)
  }

  return {
    showPromiseToast
  }
}
3. Use the composable in your component or page where you want to create the toast: 
<template>
  <button @click="handleAction">Start Action</button>
</template>

<script setup>
import { useGlobalToast } from '~/composables/useGlobalToast'

const { showPromiseToast } = useGlobalToast()

const handleAction = () => {
  showPromiseToast(
    () => new Promise(resolve => setTimeout(resolve, 5000)),
    {
      loading: 'Action in progress...',
      success: 'Action completed!',
      error: 'Action failed'
    }
  )
}
</script>
<template>
  <button @click="handleAction">Start Action</button>
</template>

<script setup>
import { useGlobalToast } from '~/composables/useGlobalToast'

const { showPromiseToast } = useGlobalToast()

const handleAction = () => {
  showPromiseToast(
    () => new Promise(resolve => setTimeout(resolve, 5000)),
    {
      loading: 'Action in progress...',
      success: 'Action completed!',
      error: 'Action failed'
    }
  )
}
</script>
4. On other pages where you want to check the promise state: 
<template>
  <div>
    <p>Promise state: {{ promiseState }}</p>
    <button @click="checkPromiseState">Check Promise State</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const nuxtApp = useNuxtApp()
const promiseState = ref('No promise')

const checkPromiseState = async () => {
  const promise = nuxtApp.$getGlobalPromise()
  if (promise) {
    promiseState.value = 'Pending'
    try {
      await promise
      promiseState.value = 'Fulfilled'
    } catch {
      promiseState.value = 'Rejected'
    }
  } else {
    promiseState.value = 'No promise'
  }
}
</script>
<template>
  <div>
    <p>Promise state: {{ promiseState }}</p>
    <button @click="checkPromiseState">Check Promise State</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const nuxtApp = useNuxtApp()
const promiseState = ref('No promise')

const checkPromiseState = async () => {
  const promise = nuxtApp.$getGlobalPromise()
  if (promise) {
    promiseState.value = 'Pending'
    try {
      await promise
      promiseState.value = 'Fulfilled'
    } catch {
      promiseState.value = 'Rejected'
    }
  } else {
    promiseState.value = 'No promise'
  }
}
</script>
This implementation uses the provide method of the Nuxt plugin system to make the global promise accessible throughout your application. The useGlobalToast composable wraps the promise creation and sets it globally before passing it to vue-sonner's toast.promise. Remember that this solution will work within a single session, but the promise state won't persist across page reloads or separate browser tabs. For more information on creating and using plugins in Nuxt, you can refer to the Nuxt Docs: Plugins. I hope this helps you implement the global promise functionality you're looking for. Let me know if you need any further clarification or have any questions about this implementation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2w ago
<@507643246902640641> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Jonas
JonasOP•2w ago
Guys, is this even possible? Do I have to make a webhook instead?

Did you find this page helpful?