chore(deps): update dependency nuxt to v4

app/plugins/01.grafana.ts

@@ -0,0 +1,46 @@
+import { FetchTransport, getWebInstrumentations, initializeFaro,InternalLoggerLevel } from '@grafana/faro-web-sdk'
+import { TracingInstrumentation } from '@grafana/faro-web-tracing'
+import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch'
+
+import { envConfig } from '~/utils/environment'
+const config = envConfig(window.location.hostname)
+
+export default defineNuxtPlugin((nuxtApp) => {
+  if (config.grafanaUrl) {
+    const faro = initializeFaro({
+      app: {
+        name: 'Shiny Frontend',
+        version: '1.0.0',
+        environment: config.name,
+      },
+      sessionTracking: {
+        samplingRate: config.tracesSampleRate,
+      },
+      instrumentations: [
+        // Mandatory, omits default instrumentations otherwise.
+        ...getWebInstrumentations(),
+
+        // Tracing package to get end-to-end visibility for HTTP requests.
+        new TracingInstrumentation({
+          instrumentations: [
+            new FetchInstrumentation({
+              ignoreUrls: [
+                config.grafanaUrl,
+                config.apiUrl,
+                new RegExp('.*/sw.js$'),
+                new RegExp('.*_payload.json.*'),
+                new RegExp(`https://${config.auth.domain}/*`),
+              ],
+            }),
+          ],
+        }),
+      ],
+      internalLoggerLevel: InternalLoggerLevel.VERBOSE,
+      transports: [
+        new FetchTransport({ url: config.grafanaUrl }),
+      ],
+    })
+    console.log(`initialized faro for ${config.grafanaUrl}, sample-rate ${config.tracesSampleRate * 100}%`)
+    nuxtApp.provide('faro', faro)
+  }
+})

app/plugins/apollo.ts

@@ -0,0 +1,107 @@
+import { ApolloClient, ApolloLink, createHttpLink, from, InMemoryCache, split } from '@apollo/client/core'
+import { setContext } from '@apollo/client/link/context'
+import { WebSocketLink } from '@apollo/client/link/ws'
+import { getMainDefinition } from '@apollo/client/utilities'
+import type { GetTokenSilentlyOptions } from '@auth0/auth0-spa-js'
+import type { Auth0VueClient } from '@auth0/auth0-vue'
+import { SpanKind, TraceFlags } from '@opentelemetry/api'
+import { DefaultApolloClient, provideApolloClient } from '@vue/apollo-composable'
+
+import { defineNuxtPlugin, useNuxtApp } from '#app'
+import { envConfig } from '~/utils/environment'
+
+const apiUrl = envConfig(window.location.hostname).apiUrl
+const wsUrl = apiUrl.replace(/^http/, 'ws')
+
+const cache = new InMemoryCache({
+  typePolicies: {
+  },
+})
+
+const getToken = async (options: GetTokenSilentlyOptions) => {
+  const nuxtApp = useNuxtApp()
+  const auth0: Auth0VueClient = nuxtApp.$auth0 as Auth0VueClient
+  return await auth0.getAccessTokenSilently(options).catch(() => {
+    return undefined
+  })
+}
+
+const httpLink = createHttpLink({
+  uri: apiUrl,
+})
+
+const wsLink = new WebSocketLink({
+  uri: wsUrl,
+  options: {
+    reconnect: true,
+    lazy: true,
+    connectionParams: () => {
+      return getToken({}).then((token) => ({
+        authToken: token,
+      }))
+    },
+  },
+})
+
+const authLink = setContext(async (_, { headers }) => {
+  return await getToken({}).then((token) => ({
+    headers: {
+      ...headers,
+      authorization: token ? `Bearer ${token}` : '',
+    },
+  }))
+})
+
+const createSpanLink = new ApolloLink((operation, forward) => {
+  const nuxtApp = useNuxtApp()
+  if (nuxtApp.$faro) {
+    const { trace } = nuxtApp.$faro.api.getOTEL()
+    const span = trace.getTracer('default').startSpan(`gql.${operation.operationName}`, {
+      kind: SpanKind.INTERNAL, // 0: Internal, 1: Server, 2: Client, 3: Producer, 4: Consumer
+    })
+    const spanContext = span.spanContext()
+    const traceParent = '00' + '-' + spanContext.traceId + '-' + spanContext.spanId + '-0' + Number(spanContext.traceFlags || TraceFlags.NONE).toString(16)
+    operation.setContext({ span, headers: { ...operation.getContext().headers, 'traceparent': traceParent } })
+
+    return forward(operation).map((data) => {
+      span.end()
+      return data
+    })
+  }
+  return forward(operation)
+})
+
+const link =
+    from([
+      createSpanLink,
+      split(
+        ({ query }) => {
+          const definition = getMainDefinition(query)
+          return (
+            definition.kind === 'OperationDefinition' &&
+            definition.operation === 'subscription'
+          )
+        },
+        authLink.concat(wsLink),
+        authLink.concat(httpLink),
+      ),
+    ])
+
+const instance = new ApolloClient({
+  connectToDevTools: true,
+  link,
+  cache,
+  defaultOptions: {
+    query: {
+      fetchPolicy: 'cache-first',
+    },
+    watchQuery: {
+      fetchPolicy: 'cache-and-network',
+    },
+  },
+})
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.provide(DefaultApolloClient[Symbol.toStringTag], instance)
+  provideApolloClient(instance)
+})

app/plugins/auth0.ts

@@ -0,0 +1,11 @@
+import { createAuth0 } from '@auth0/auth0-vue'
+
+import { defineNuxtPlugin } from '#app'
+import { envConfig } from '~/utils/environment'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const options = envConfig(window.location.hostname).auth
+  const auth0 = createAuth0(options)
+  nuxtApp.vueApp.use(auth0)
+  nuxtApp.provide('auth0', auth0)
+})

app/plugins/vuetify.ts

@@ -0,0 +1,15 @@
+import '@mdi/font/css/materialdesignicons.css'
+import 'vuetify/styles'
+
+import { createVuetify } from 'vuetify'
+
+import { defineNuxtPlugin } from '#app'
+
+export default defineNuxtPlugin((app) => {
+  const vuetify = createVuetify({
+    theme: {
+      defaultTheme: 'light',
+    },
+  })
+  app.vueApp.use(vuetify)
+})