Nuxt•17mo 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•17mo ago

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

jd_solanki•17mo ago

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

jd_solanki•17mo 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•17mo ago

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

jd_solanki•17mo ago

base is from nuxt config:

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

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

jd_solanki•17mo 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•17mo ago

Uh ye because the util doesn't have that context

jd_solanki•17mo ago

URL is localhost/about instead of full path

harlan•17mo ago

You'll need to construct it yourself

jd_solanki•17mo 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•17mo 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