Using with Nuxt 2

[kelanik8]

No description provided.

[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