Nuxt•2y ago

How to get full req URL in server plugin & update appConfig that gets carried/reflected to client

Hi 👋 I'm building nuxt template and encoutering strange case where I want to deploy single nuxt app and want to server it from 6 different URL for different demo purposes. Question: How can I get full requested URL in server plugin like domain.com/demo-1/ (I need subpath ("demo-1") my nuxt is serving to). Based on this requested path I want to alter the appConfig from server plugin and want to reflect that config in client app. e.g. demo-1 will have light theme & demo-2 will have dark theme. I tried getting full url but nuxtApp.ssrContext?.event.node.req.url only gives app's route path not requested URL. 🤷 (something like this: https://nuxt.com/docs/getting-started/testing#urlpath)

Nuxt

Testing · Get Started with Nuxt

How to test your Nuxt application.

11 Replies

harlan•2y ago

const host = getRequestHost(e, { xForwardedHost: true })

jd_solankiOP•2y ago

More details: https://github.com/unjs/h3/pull/351/files Thanks.

jd_solankiOP•2y ago

However neither getRequestHost nor getRequestURL returns the full URL 😞

import { getRequestHost, getRequestURL } from 'h3';

export default defineNuxtPlugin(nuxtApp => {
  console.log('baseUrl :>> ', nuxtApp.$config.app.baseURL)

  if (nuxtApp.ssrContext?.event) {
    const host = getRequestHost(nuxtApp.ssrContext.event, { xForwardedHost: true })
    const url = getRequestURL(nuxtApp.ssrContext.event, { xForwardedHost: true })
    console.log('host :>> ', host)
    console.log('url :>> ', url)
  }
  console.log('server plugin loaded')
})

import { getRequestHost, getRequestURL } from 'h3';

export default defineNuxtPlugin(nuxtApp => {
  console.log('baseUrl :>> ', nuxtApp.$config.app.baseURL)

  if (nuxtApp.ssrContext?.event) {
    const host = getRequestHost(nuxtApp.ssrContext.event, { xForwardedHost: true })
    const url = getRequestURL(nuxtApp.ssrContext.event, { xForwardedHost: true })
    console.log('host :>> ', host)
    console.log('url :>> ', url)
  }
  console.log('server plugin loaded')
})

I got log when I visit: http://localhost:3000/vuexy-vuejs-admin-template/demo/

harlan•2y ago

Just combine them? Or is base url the nitro base?

jd_solankiOP•2y ago

base is from nuxt config:

app: {
    baseURL: '/vuexy-vuejs-admin-template/demo/',
  },

app: {
    baseURL: '/vuexy-vuejs-admin-template/demo/',
  },

jd_solankiOP•2y ago

I guess it's h3's bug where it doesn't consider the base URL if we visit: http://localhost:3000/vuexy-vuejs-admin-template/demo/about

harlan•2y ago

Uh ye because the util doesn't have that context

jd_solankiOP•2y ago

URL is localhost/about instead of full path

harlan•2y ago

You'll need to construct it yourself

jd_solankiOP•2y ago

Actually, I need to get the full served path like http://localhost:3000/vuexy-vuejs-admin-template/demo/about because I have very special case where single nuxt app will get served by six different demos. (I will server demo-1,2,3,4,5,6 urls from single nuxt app and change the app config based on visited demo) using nginx Meaning demo in baseUrl is just for single deployment dir, I'm going to server that demo dir's nuxt to six different sub paths named above 😅

harlan•2y ago

There may be a nuxt util for this, can't remeber, I've been rolling my own on my modules

Gaming

Programming

How to get full req URL in server plugin & update appConfig that gets carried/reflected to client