Using with Nuxt 2

[danielroe]

This module currently supports Nuxt 2 (with Bridge) or Nuxt 3. You can find out more about how to use Bridge here.

[itsmnthn]

is there any plan to support Nuxt2? or with vue-gtag?

[itsmnthn]

I have demo with Nuxt2 but it doesn't support Router

nuxt2-partytown

[andrevferreiraa]

Would be nice to support Nuxt2 without us having to change our project to implement Bridge

[avinean]

@danielroe I got an error while running partytown on Nuxt 2 (with Bridge) What I missed?

Package.json

{ "name": "test", "version": "1.0.0", "private": true, "scripts": { "dev": "nuxi dev", "build": "nuxi build", "start": "nuxi preview" }, "dependencies": { "@nuxtjs/partytown": "^1.1.1", "core-js": "^3.19.3", "nuxt-edge": "latest", "vue": "^2.6.14", "vue-server-renderer": "^2.6.14", "vue-template-compiler": "^2.6.14", "webpack": "^4.46.0" }, "devDependencies": { "@nuxt/bridge": "npm:@nuxt/bridge-edge" } }

nuxt.config.js import { defineNuxtConfig } from "@nuxt/bridge"; import PartyTownModule from "@nuxtjs/partytown";

export default defineNuxtConfig({ // Global page headers: https://go.nuxtjs.dev/config-head head: { title: "test", htmlAttrs: { lang: "en", }, meta: [ { charset: "utf-8" }, { name: "viewport", content: "width=device-width, initial-scale=1" }, { hid: "description", name: "description", content: "" }, { name: "format-detection", content: "telephone=no" }, ], link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }], },

// Global CSS: https://go.nuxtjs.dev/config-css css: [],

// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins plugins: [],

// Auto import components: https://go.nuxtjs.dev/config-components components: true,

// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules buildModules: [],

// Modules: https://go.nuxtjs.dev/config-modules modules: [PartyTownModule], meta: { script: [{ src: "/test-script.js", type: "text/partytown" }], }, // partytown: { // // // },

// Build Configuration: https://go.nuxtjs.dev/config-build build: {}, });

[danielroe]

@avinean Would you try upgrading your @nuxt/bridge version? If that doesn't resolve it for you, would you open a new issue? (This issue is for support without Bridge.)

[avinean]

@danielroe it looks like I use the latest version of @nuxt/bridge. isn't it?

What about using without bridge? Is there any prediction when it will be possible?

[avinean]

@itsmnthn Hi! Did you manage to solve issue with Router?

[itsmnthn]

@itsmnthn Hi! Did you manage to solve issue with Router?

I tried with nuxt2 I got partytown working. To support Router we need to send custom event something like window.dataLayer.push(pageViewEventData) when router changes. I used locationChanged and popstate event listener to listen all route changes from browser API. everything seems working but window.dataLayer.push(pageViewEventData) not working as it should.

Also, when I try official test for GTM https://partytown.builder.io/tests/integrations/gtm/ it doesn't work for me when I do this in console log (this follows GTM's guideline)

window.dataLayer.push(['event', 'aaa', {
  'event_category' : 'bbb',
  'event_label' : 'ccc'
}])

Code that I wrote to support Router, It doesn't work but you can take a look https://github.com/itsmnthn/nuxt2-partytown

[danielroe]

Experimental Nuxt 2 support is available in 1.2.1. Give it a try and let me know how it works for you!

[cb-velmurugan]

@itsmnthn Hi! Did you manage to solve issue with Router?

I tried with nuxt2 I got partytown working. To support Router we need to send custom event something like window.dataLayer.push(pageViewEventData) when router changes. I used locationChanged and popstate event listener to listen all route changes from browser API. everything seems working but window.dataLayer.push(pageViewEventData) not working as it should.

Also, when I try official test for GTM https://partytown.builder.io/tests/integrations/gtm/ it doesn't work for me when I do this in console log (this follows GTM's guideline)

window.dataLayer.push(['event', 'aaa', {
  'event_category' : 'bbb',
  'event_label' : 'ccc'
}])

Code that I wrote to support Router, It doesn't work but you can take a look https://github.com/itsmnthn/nuxt2-partytown

How to implement GTM preview mode in your code?

Preview Mode is we used GTM code for staging.

[joaopedrodcf]

Experimental Nuxt 2 support is available in 1.2.1. Give it a try and let me know how it works for you!

Just to validate so the module does work with: Nuxt 2, Nuxt 2 bridge and Nuxt 3 right? I did try to use it in a nuxt 2 application and I could see some partytown logs being debugged so just wanted to check about the support, thanks 👌

Edit: Just saw that on version 1.20 was introduced a PR with experiential nuxt 2 without bridge 👌

[yalcinumutt]

Experimental Nuxt 2 support is available in 1.2.1. Give it a try and let me know how it works for you!

It actually works fine with changing package.json nuxt dependency to nuxt-edge without using bridge. When I try to use with nuxt dependency it throw errors unknown file extension as Unknown file extension: node_modules/knitwork/dist/index.cjs

[chhumsina]

Experimental Nuxt 2 support is available in 1.2.1. Give it a try and let me know how it works for you!

Could you provide sample setup of Nuxtjs 2?

Thank you.

[MooseSaeed]

Is there any updates here?

[abdurrahmanseyidoglu]

any updates regarding working with Nuxt2? a working demo would be perfect