N
Nuxt•3mo ago
Alex92

Pass client IP to client-side

Hello! Could you please suggest, how i can get client IP and pass it to client-side to use in pages/plugins/components ?
2 Replies
kapa.ai
kapa.ai•3mo ago
Hi @Alex92. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To get the client IP and make it available on the client-side in Nuxt, you can follow this approach: 1. Extract the IP on the server-side using request headers (e.g., x-real-ip or x-forwarded-for). This is typically done in a Nuxt plugin that runs on the server during SSR. 2. Store the IP in a Pinia store (or another state management solution), so it can be accessed in your pages, plugins, or components. Here’s a summary of the recommended approach from the knowledge sources: - In your Nuxt project, create a Pinia store (e.g., stores/ip.ts) to hold the IP address. - Create a Nuxt plugin (e.g., plugins/init.ts) that runs on the server, reads the IP from the request headers, and sets it in the store. - You can then access the IP from the store anywhere in your app. Example: stores/ip.ts 
import { defineStore } from 'pinia'

export const useIpStore = defineStore('ip', {
  state: () => ({
    _ip: ''
  }),
  getters: {
    ip: (state) => state._ip
  },
  actions: {
    setIp(ip: string) {
      this._ip = ip
    }
  }
})
import { defineStore } from 'pinia'

export const useIpStore = defineStore('ip', {
  state: () => ({
    _ip: ''
  }),
  getters: {
    ip: (state) => state._ip
  },
  actions: {
    setIp(ip: string) {
      this._ip = ip
    }
  }
})
plugins/init.ts 
import { defineNuxtPlugin } from '#app'
import { useIpStore } from '~/stores/ip'

export default defineNuxtPlugin((nuxtApp) => {
  const headers = useRequestHeaders()
  const ip = headers['x-real-ip'] ?? ''
  const ipStore = useIpStore()
  ipStore.setIp(ip)
})
import { defineNuxtPlugin } from '#app'
import { useIpStore } from '~/stores/ip'

export default defineNuxtPlugin((nuxtApp) => {
  const headers = useRequestHeaders()
  const ip = headers['x-real-ip'] ?? ''
  const ipStore = useIpStore()
  ipStore.setIp(ip)
})
Usage in a component: 
<script setup lang="ts">
import { useIpStore } from '~/stores/ip'
const ipStore = useIpStore()
const clientIp = computed(() => ipStore.ip)
</script>
<template>
  <div>Your IP: {{ clientIp }}</div>
</template>
<script setup lang="ts">
import { useIpStore } from '~/stores/ip'
const ipStore = useIpStore()
const clientIp = computed(() => ipStore.ip)
</script>
<template>
  <div>Your IP: {{ clientIp }}</div>
</template>
Note: You need to ensure your reverse proxy (e.g., nginx) is configured to forward the real client IP in the headers: 
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
This approach will make the client IP available on the client-side after SSR, and you can use it in any part of your Nuxt app Nuxt3: provide server evaluated variable to client at every request. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@641916049968726026> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?