Run hooks and props within the context of the vue app

[pleek91]

Description

Since 3.3 vue has had a utility called runWithContext which allows for global injection to work within any callback. Using this when running hooks and props means that global injection also works within those callback.

import { inject } from 'vue'

router.onAfterRouteEnter((to, context) => {
  const value = inject('global')

  ...
})

import { inject } from 'vue'

const route = createRoute({
  ...
}, async (route) => {
  const value = inject('global')

  return { value }
})

[netlify]

✅ Deploy Preview for kitbag-router ready!

Name	Link
🔨 Latest commit	e29c7e4
🔍 Latest deploy log	https://app.netlify.com/sites/kitbag-router/deploys/679ad0dbfd69f9000828368c
😎 Deploy Preview	https://deploy-preview-448--kitbag-router.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[stackoverfloweth]

I know this is overkill but thoughts on storing the vueApp in it's own "store"? That would solve 2 things I don't love about the current implementation.

1. we use a let
2. the hooks and props technically have independent references and ideally they'd look in the same place

[stackoverfloweth]

that new "store" could also be responsible for exporting the runWithContext piece

[pleek91]

Don't hate it, I'll look into that tomorrow.

[pleek91]

@stackoverfloweth looking at this again not sure how the new store would work. We don't really have a way for the propsStore to get something from a separate store. Maybe we can chat about this