refactor: migrate nuxt gtm module to nuxt/scripts

2025-08-17 03:05:00 +08:00
parent 190c05918b
commit 13b6ad6047
13 changed files with 5587 additions and 3571 deletions
--- a/app/components/ChooseFood.vue
+++ b/app/components/ChooseFood.vue
@@ -12,7 +12,8 @@ const curStuff = computed(() => rStore.selectedStuff)
 const recipeBtnRef = ref<HTMLButtonElement>()
 const { playAnimation } = useEmojiAnimation(recipeBtnRef)

-const gtm = useGtm()
+const { proxy } = useScriptGoogleTagManager()
+
 const recipePanelRef = ref()
 const { isVisible, show } = useInvisibleElement(recipePanelRef)

@@ -22,13 +23,13 @@ function toggleStuff(item: StuffItem, category = '', _e?: Event) {
  if (curStuff.value.includes(item.name))
    playAnimation(item.emoji)

-  gtm?.trackEvent({
+  proxy.dataLayer.push({
    event: 'click',
    category: `${category}_${item.name}`,
    action: 'click_stuff',
    label: '食材',
  })
-  gtm?.trackEvent({
+  proxy.dataLayer.push({
    event: 'click_stuff',
    action: item.name,
  })
--- a/app/components/RandomRecipe.vue
+++ b/app/components/RandomRecipe.vue
@@ -5,13 +5,13 @@ const { random, randomRecipes } = useRandomRecipe(count)

 <template>
  <div inline-flex m="y-3">
-    <button rounded-full p-2 btn @click="dec()">
+    <button btn rounded-full p-2 @click="dec()">
      <div i-carbon-subtract />
    </button>
    <div font="mono" w="15" m-auto inline-block>
      {{ count }}
    </div>
-    <button rounded-full p-2 btn @click="inc()">
+    <button btn rounded-full p-2 @click="inc()">
      <div i-carbon-add />
    </button>
  </div>
--- a/app/components/ToggleMode.vue
+++ b/app/components/ToggleMode.vue
@@ -21,7 +21,7 @@ const searchModes: {
 <template>
  <div>
    <button
-      v-for="mode in searchModes" :key="mode.id" class="rounded px-2 tag"
+      v-for="mode in searchModes" :key="mode.id" class="tag rounded px-2"
      :bg="mode.id === rStore.curMode ? 'orange-500 dark:orange-600 opacity-100' : 'orange-300 opacity-20'"
      :text="mode.id === rStore.curMode ? 'orange-100' : 'orange-800 dark:orange-200'"
      @click="rStore.setMode(mode.id)"
--- a/app/components/tags/DishTag.vue
+++ b/app/components/tags/DishTag.vue
@@ -9,7 +9,7 @@ const props = defineProps<{
  dish: RecipeItem | DbRecipeItem
 }>()

-const gtm = useGtm()
+const { proxy } = useScriptGoogleTagManager()

 function triggerGtm(dish: RecipeItem) {
  recipeHistories.value.push({
@@ -17,13 +17,13 @@ function triggerGtm(dish: RecipeItem) {
    time: Date.now(),
  })

-  gtm?.trackEvent({
+  proxy.dataLayer.push({
    event: 'click',
    category: `dish_${dish.name}`,
    action: 'click_recipe',
    label: '跳转菜谱',
  })
-  gtm?.trackEvent({
+  proxy.dataLayer.push({
    event: 'click_dish',
    action: dish.name,
  })
@@ -37,7 +37,7 @@ const dishLabel = computed(() => {

 <template>
  <a
-    :href="dish.link || `https://www.bilibili.com/video/${dish.bv}`" target="_blank" class="dish-tag rounded tag" p="x-2"
+    :href="dish.link || `https://www.bilibili.com/video/${dish.bv}`" target="_blank" class="dish-tag tag rounded" p="x-2"
    border="~ blue-200 dark:blue-800"
    bg="blue-300 opacity-20"
    @click="triggerGtm(dish)"
--- a/app/components/tags/MeatTag.vue
+++ b/app/components/tags/MeatTag.vue
@@ -6,7 +6,7 @@ defineProps<{

 <template>
  <button
-    class="meat-tag rounded tag" p="x-2"
+    class="meat-tag tag rounded" p="x-2"
    border="~ red-200 dark:red-800"
    :bg="active ? 'red-500 opacity-90' : 'red-300 opacity-20'"
    :text="active ? 'red-100' : 'red-800 dark:red-200'"
--- a/app/components/tags/StapleTag.vue
+++ b/app/components/tags/StapleTag.vue
@@ -6,7 +6,7 @@ defineProps<{

 <template>
  <button
-    class="rounded tag" p="x-2" border="~ yellow-200 dark:yellow-800"
+    class="tag rounded" p="x-2" border="~ yellow-200 dark:yellow-800"
    :bg="active ? 'yellow-500 dark:yellow-600 opacity-100' : 'yellow-300 opacity-20'"
    :text="active ? 'yellow-100' : 'yellow-800 dark:yellow-200'"
  >
--- a/app/components/tags/ToolTag.vue
+++ b/app/components/tags/ToolTag.vue
@@ -6,7 +6,7 @@ defineProps<{

 <template>
  <button
-    class="rounded tag" p="x-2"
+    class="tag rounded" p="x-2"
    border="~ stone-200 dark:stone-600"
    :bg="active ? 'stone-600 opacity-100' : 'stone-300 opacity-5'"
    :text="active ? 'stone-100' : 'stone-800 dark:stone-200'"
--- a/app/components/tags/VegetableTag.vue
+++ b/app/components/tags/VegetableTag.vue
@@ -6,7 +6,7 @@ defineProps<{

 <template>
  <button
-    class="vegetable-tag rounded tag" p="x-2"
+    class="vegetable-tag tag rounded" p="x-2"
    border="~ green-200 dark:green-800"
    :bg="active ? 'green-600 opacity-90' : 'green-300 opacity-20'"
    :text="active ? 'green-100' : 'green-800 dark:green-200'"
--- a/app/composables/store/recipe.ts
+++ b/app/composables/store/recipe.ts
@@ -1,5 +1,4 @@
 import type { RecipeItem, StuffItem } from '~/types'
-import { useGtm } from '@gtm-support/vue-gtm'
 import { useStorage } from '@vueuse/core'
 import { acceptHMRUpdate, defineStore } from 'pinia'
 import { computed, onMounted, ref, watch } from 'vue'
@@ -16,7 +15,7 @@ const namespace = 'cook'
 export type SearchMode = 'survival' | 'loose' | 'strict'

 export const useRecipeStore = defineStore('recipe', () => {
-  const gtm = useGtm()
+  const { proxy } = useScriptGoogleTagManager()
  const { settings } = useAppStore()

  /**
@@ -136,13 +135,13 @@ export const useRecipeStore = defineStore('recipe', () => {
    const value = item.name
    toggleTools(value)

-    gtm?.trackEvent({
+    proxy.dataLayer.push({
      event: 'click',
      category: `tool_${value}`,
      action: 'click_tool',
      label: '工具',
    })
-    gtm?.trackEvent({
+    proxy.dataLayer.push({
      event: 'click_tool',
      action: item.name,
    })
--- a/app/pages/404.vue
+++ b/app/pages/404.vue
@@ -9,7 +9,7 @@
    </div>
    <div>菜谱消失了</div>
    <div>
-      <NuxtLink text-sm btn m="3 t8" to="/">
+      <NuxtLink btn text-sm m="3 t8" to="/">
        返回主页
      </NuxtLink>
    </div>
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -20,13 +20,12 @@ export default defineNuxtConfig({
    '@nuxt/eslint',
    '@nuxt/test-utils/module',

-    '@zadigetvoltaire/nuxt-gtm',
-
    '@yunlefun/vue/nuxt',

    // fix QQ in iOS, Done
    // See https://github.com/unjs/ofetch/pull/366
    // 'nuxt-fix-ofetch',
+    '@nuxt/scripts',
  ],
  ssr: false,

@@ -106,9 +105,16 @@ export default defineNuxtConfig({
    },
  },

-  gtm: {
-    id: 'GTM-5FJSV46',
-  },
-
  pwa,
+
+  /**
+   * @see https://scripts.nuxt.com/scripts/tracking/google-tag-manager
+   */
+  scripts: {
+    registry: {
+      googleTagManager: {
+        id: 'GTM-5FJSV46',
+      },
+    },
+  },
 })
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
  "type": "module",
  "version": "1.2.4",
  "private": true,
-  "packageManager": "pnpm@9.15.4",
+  "packageManager": "pnpm@10.14.0",
  "engines": {
    "node": ">=16"
  },
@@ -28,52 +28,52 @@
    "vue-about-me": "^1.4.0"
  },
  "devDependencies": {
-    "@antfu/eslint-config": "^3.16.0",
+    "@antfu/eslint-config": "^5.2.1",
    "@headlessui/vue": "^1.7.23",
-    "@iconify-json/carbon": "^1.2.5",
-    "@iconify-json/fe": "^1.2.2",
+    "@iconify-json/carbon": "^1.2.13",
+    "@iconify-json/fe": "^1.2.4",
    "@iconify-json/gg": "^1.2.2",
-    "@iconify-json/ic": "^1.2.2",
+    "@iconify-json/ic": "^1.2.4",
    "@iconify-json/mdi": "^1.2.3",
    "@iconify-json/ri": "^1.2.5",
-    "@iconify-json/twemoji": "^1.2.2",
-    "@nuxt/devtools": "^1.7.0",
-    "@nuxt/eslint": "^0.7.5",
-    "@nuxt/test-utils": "^3.15.4",
+    "@iconify-json/twemoji": "^1.2.4",
+    "@nuxt/devtools": "^2.6.2",
+    "@nuxt/eslint": "^1.8.0",
+    "@nuxt/scripts": "^0.11.10",
+    "@nuxt/test-utils": "^3.19.2",
    "@nuxtjs/color-mode": "^3.5.2",
-    "@pinia/nuxt": "^0.9.0",
-    "@pinia/testing": "^0.1.7",
-    "@unocss/eslint-config": "^65.4.3",
-    "@unocss/nuxt": "^65.4.3",
-    "@vite-pwa/nuxt": "^0.10.6",
+    "@pinia/nuxt": "^0.11.2",
+    "@pinia/testing": "^1.0.2",
+    "@unhead/vue": "^2.0.14",
+    "@unocss/eslint-config": "^66.4.2",
+    "@unocss/nuxt": "^66.4.2",
+    "@vite-pwa/nuxt": "^1.0.4",
    "@vue/test-utils": "^2.4.6",
-    "@vueuse/nuxt": "^12.5.0",
+    "@vueuse/nuxt": "^13.6.0",
    "@yunlefun/vue": "^0.1.1",
-    "@zadigetvoltaire/nuxt-gtm": "^0.0.13",
-    "bumpp": "^9.10.2",
-    "consola": "^3.4.0",
+    "bumpp": "^10.2.3",
+    "consola": "^3.4.2",
    "dexie": "^4.0.11",
-    "eslint": "^9.18.0",
+    "eslint": "^9.33.0",
    "eslint-plugin-format": "^1.0.1",
-    "fake-indexeddb": "^6.0.0",
-    "jsdom": "^26.0.0",
-    "lint-staged": "^15.4.2",
-    "nuxt": "^3.15.2",
-    "pinia": "^2.3.1",
-    "sass": "^1.83.4",
+    "fake-indexeddb": "^6.1.0",
+    "jsdom": "^26.1.0",
+    "lint-staged": "^16.1.5",
+    "nuxt": "^4.0.3",
+    "pinia": "^3.0.3",
+    "sass": "^1.90.0",
    "serve": "^14.2.4",
-    "simple-git-hooks": "^2.11.1",
+    "simple-git-hooks": "^2.13.1",
    "star-markdown-css": "^0.5.3",
-    "tsx": "^4.19.2",
-    "typescript": "5.7.2",
-    "unocss": "^65.4.3",
-    "vitest": "^3.0.4",
-    "vue-tsc": "^2.2.0"
+    "tsx": "^4.20.4",
+    "typescript": "^5.9.2",
+    "unocss": "^66.4.2",
+    "vitest": "^3.2.4",
+    "vue-tsc": "^3.0.5"
  },
  "resolutions": {
-    "unplugin": "^2.1.2",
-    "vite": "^6.0.11",
-    "vite-plugin-inspect": "^10.1.0"
+    "unplugin": "^2.3.6",
+    "vite": "^7.1.2"
  },
  "simple-git-hooks": {
    "pre-commit": "pnpm lint-staged"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml