Nuxt•2y ago

Managing Server State

I have some sensitive data I need to load before presenting a login page. In the vue page, I use useNuxtData to use data that was provided in a plugin. I wasn't sure how to keep the page "server only" if possible, since the provide only happens if process.server.

1 Reply

dmarrOP•2y ago

Maybe I could somehow use useState to share some server state with the client? I don't have ability to useState in middleware Ok, I think i've made a little progress. I'm using a plugin that does this:

export default defineNuxtPlugin(nuxtApp => {
  useFetch('/api/realm', { key: 'realm' });
})

export default defineNuxtPlugin(nuxtApp => {
  useFetch('/api/realm', { key: 'realm' });
})

Then in my app I can use const { data: realm } = useNuxtData('realm'). However, when the route runs on the server load, the host is always localhost. Is there a way I can get the actual host? Well, my plan isn't working out so well. I rely on the host to lookup api information. Maybe this is odd, but i basically do something like: fetch('http://my-api/realms'), and do a match on the current host. the host can vary by subdomain, so it will match the returned data against that. In any case, I figured I could just rely on the client by doing this in my plugin:

const defaultRealm = {
  id: null,
  app: {},
  name: '',
};
export default defineNuxtPlugin(async nuxtApp => { 
  useFetch('/api/realm', { key: 'realm', default: () => defaultRealm, server: false });
})

const defaultRealm = {
  id: null,
  app: {},
  name: '',
};
export default defineNuxtPlugin(async nuxtApp => { 
  useFetch('/api/realm', { key: 'realm', default: () => defaultRealm, server: false });
})

however, when I useNuxtData('realm') the data is always null ok, i found that the useRequestURL() composable works on server.

Gaming

Programming

Managing Server State