How to set up Google Analytics 4 (GA4) with Nuxt.js?

You can use nuxt-gtag or @nuxt/scripts. Please refer to the Google Analytics integration documentation for more details.

For Nuxt 4, use nuxt-gtag.

Using nuxt-gtag

Install the Google Analytics module nuxt-gtag in your project.
Run the following command:

npm install --save-dev nuxt-gtag

note

nuxt-gtag v5 and later target Nuxt 4 and later. If you are using Nuxt 3, run npm install --save-dev nuxt-gtag@4 to install v4.

Configure Google Analytics in nuxt.config.ts.
Open nuxt.config.ts and add the following:

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-gtag'],
  gtag: {
    id: 'G-XXXXXXX'
  }
})

caution

Replace G-XXXXXXX with your own measurement ID.

You can also use @nuxt/scripts to set it up via Google Tag Manager.
Please refer to the Google Analytics integration documentation for more details.

If you have any other questions, please contact us or check out Our Slack Community.