Merge pull request #502 from AndroidDagashi/bridge-plugins

packages/site/nuxt.config.ts

@@ -126,7 +126,7 @@ export default defineNuxtConfig({
     { src: '~/plugins/api.client.ts', mode: 'client' },
     '~/plugins/markdownit.ts',
     '~/plugins/iconify-icon.ts',
-    { src: '~/plugins/ga.js', ssr: false },
+    { src: '~/plugins/gtag.ts', ssr: false },
     { src: '~/plugins/init.client.ts', mode: 'client' },
   ],
   tailwindcss: {

packages/site/plugins/api.client.ts

@@ -1,5 +1,5 @@
-import type { Context } from '@nuxt/types'
 import type { ApiClient, Options } from '../data/api'
+import { defineNuxtPlugin } from '#imports'
 
 class ClientApiClient implements ApiClient {
   private readonly options: Options
@@ -14,13 +14,10 @@ class ClientApiClient implements ApiClient {
   }
 }
 
-export default (
-  context: Context,
-  inject: (key: string, value: unknown) => void
-): Promise<void> | void => {
-  const client = new ClientApiClient({ baseURL: context.$config.apiEndpoint })
+export default defineNuxtPlugin((nuxtApp) => {
+  const client = new ClientApiClient({
+    baseURL: nuxtApp.$config.apiEndpoint,
+  })
 
-  context.$api = client
-
-  inject('api', client)
-}
+  nuxtApp.provide('api', client)
+})

packages/site/plugins/api.server.ts

@@ -1,6 +1,6 @@
 import fs from 'fs'
-import type { Context } from '@nuxt/types'
 import type { ApiClient, Options } from '../data/api'
+import { defineNuxtPlugin } from '#imports'
 
 class ServerApiClient implements ApiClient {
   private readonly options: Options
@@ -15,13 +15,10 @@ class ServerApiClient implements ApiClient {
   }
 }
 
-export default (
-  context: Context,
-  inject: (key: string, value: unknown) => void
-): Promise<void> | void => {
-  const client = new ServerApiClient({ baseURL: context.$config.apiEndpoint })
+export default defineNuxtPlugin((nuxtApp) => {
+  const client = new ServerApiClient({
+    baseURL: nuxtApp.$config.apiEndpoint,
+  })
 
-  context.$api = client
-
-  inject('api', client)
-}
+  nuxtApp.provide('api', client)
+})

packages/site/plugins/gtag.ts

@@ -0,0 +1,35 @@
+import { defineNuxtPlugin, useRouter } from '#imports'
+
+const GA_ID = 'UA-116221691-1'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  if (process.env.NODE_ENV !== 'production') {
+    return
+  }
+
+  const newTag = document.createElement('script')
+  newTag.async = true
+  newTag.src = `https://www.googletagmanager.com/gtag/js?id=${GA_ID}`
+
+  const existingTag = document.getElementsByTagName('script')[0]
+  existingTag.parentNode!.insertBefore(newTag, existingTag)
+
+  // @ts-ignore
+  window.dataLayer = window.dataLayer || []
+  function gtag(...args: any[]) {
+    // @ts-ignore
+    window.dataLayer.push(args)
+  }
+  // @ts-ignore
+  window.gtag = gtag
+
+  gtag('js', new Date())
+  gtag('config', GA_ID)
+
+  const router = useRouter()
+  router.afterEach((to, _from) => {
+    gtag('config', GA_ID, {
+      page_path: to.fullPath,
+    })
+  })
+})

packages/site/plugins/init.client.ts

@@ -1,12 +1,12 @@
-import type { Context } from '@nuxt/types'
+import { defineNuxtPlugin } from '#imports'
 import type { RootState } from '~/store'
 
 /**
  * dispatch `nuxtServerInit` manually if state is not initialized
  * https://github.com/nuxt/nuxt.js/issues/7051#issuecomment-604914461
  */
-export default async function ({ app, store }: Context): Promise<void> {
-  if (!(store.state as RootState).initialized) {
-    await store.dispatch('nuxtServerInit', app.context)
+export default defineNuxtPlugin(async (nuxtApp) => {
+  if (!(nuxtApp.$store.state as RootState).initialized) {
+    await nuxtApp.$store.dispatch('nuxtServerInit', nuxtApp.nuxt2Context)
   }
-}
+})

packages/site/plugins/markdownit.ts

@@ -1,10 +1,7 @@
-import type { Context } from '@nuxt/types'
 import MarkdownIt from 'markdown-it'
+import { defineNuxtPlugin } from '#imports'
 
-export default (
-  _: Context,
-  inject: (key: string, value: unknown) => void
-): Promise<void> | void => {
+export default defineNuxtPlugin((nuxtApp) => {
   const md = new MarkdownIt({
     html: true,
     breaks: true,
@@ -45,5 +42,5 @@ export default (
     return defaultStyleRenderer(tokens, idx, options, env, self)
   }
 
-  inject('md', md)
-}
+  nuxtApp.provide('md', md)
+})

packages/site/types/vuex.d.ts

@@ -0,0 +1,13 @@
+import { CommitOptions, Store } from 'vuex'
+
+declare module 'vuex' {
+  interface Commit {
+    <P = any>(type: string, payload?: P, options?: CommitOptions): void
+  }
+}
+
+declare module '@nuxt/bridge-schema' {
+  interface NuxtAppCompat {
+    $store: Store<any>
+  }
+}