refactor: migrate nuxt gtm module to nuxt/scripts

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,
   })

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>

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)"

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)"

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'"

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'"
   >

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'"

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'"

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,
     })

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>

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',
+      },
+    },
+  },
 })

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/carbon": "^1.2.13",
-    "@iconify-json/fe": "^1.2.2",
+    "@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",
+    "@iconify-json/twemoji": "^1.2.4",
-    "@nuxt/devtools": "^1.7.0",
+    "@nuxt/devtools": "^2.6.2",
-    "@nuxt/eslint": "^0.7.5",
+    "@nuxt/eslint": "^1.8.0",
-    "@nuxt/test-utils": "^3.15.4",
+    "@nuxt/scripts": "^0.11.10",
+    "@nuxt/test-utils": "^3.19.2",
     "@nuxtjs/color-mode": "^3.5.2",
-    "@pinia/nuxt": "^0.9.0",
+    "@pinia/nuxt": "^0.11.2",
-    "@pinia/testing": "^0.1.7",
+    "@pinia/testing": "^1.0.2",
-    "@unocss/eslint-config": "^65.4.3",
+    "@unhead/vue": "^2.0.14",
-    "@unocss/nuxt": "^65.4.3",
+    "@unocss/eslint-config": "^66.4.2",
-    "@vite-pwa/nuxt": "^0.10.6",
+    "@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": "^10.2.3",
-    "bumpp": "^9.10.2",
+    "consola": "^3.4.2",
-    "consola": "^3.4.0",
     "dexie": "^4.0.11",
-    "eslint": "^9.18.0",
+    "eslint": "^9.33.0",
     "eslint-plugin-format": "^1.0.1",
-    "fake-indexeddb": "^6.0.0",
+    "fake-indexeddb": "^6.1.0",
-    "jsdom": "^26.0.0",
+    "jsdom": "^26.1.0",
-    "lint-staged": "^15.4.2",
+    "lint-staged": "^16.1.5",
-    "nuxt": "^3.15.2",
+    "nuxt": "^4.0.3",
-    "pinia": "^2.3.1",
+    "pinia": "^3.0.3",
-    "sass": "^1.83.4",
+    "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",
+    "tsx": "^4.20.4",
-    "typescript": "5.7.2",
+    "typescript": "^5.9.2",
-    "unocss": "^65.4.3",
+    "unocss": "^66.4.2",
-    "vitest": "^3.0.4",
+    "vitest": "^3.2.4",
-    "vue-tsc": "^2.2.0"
+    "vue-tsc": "^3.0.5"
   },
   "resolutions": {
-    "unplugin": "^2.1.2",
+    "unplugin": "^2.3.6",
-    "vite": "^6.0.11",
+    "vite": "^7.1.2"
-    "vite-plugin-inspect": "^10.1.0"
   },
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged"