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>