Merge pull request #36 from getsentry/sig/nuxt-example

feat(nuxt): Add nuxt example application

Author: s1gr1d

apps/nuxt/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

apps/nuxt/app.vue

@@ -0,0 +1,16 @@
+<template>
+  <NuxtLayout>
+    <header>
+      <nav>
+        <ul>
+          <li><NuxtLink to="/test-param/1234">About</NuxtLink></li>
+          <li><NuxtLink to="/catchAll/my-id-1337">Post 1</NuxtLink></li>
+          <li><NuxtLink to="/404">404</NuxtLink></li>
+          <li><NuxtLink to="/?middleware">Faulty Router Middleware</NuxtLink></li>
+        </ul>
+      </nav>
+    </header>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
+<script setup lang="ts"></script>

apps/nuxt/middleware/error.global.ts

@@ -0,0 +1,5 @@
+export default defineNuxtRouteMiddleware(to => {
+  if ('middleware' in to.query) {
+    return showError('error in middleware');
+  }
+});

apps/nuxt/nuxt.config.ts

@@ -0,0 +1,16 @@
+import * as Sentry from '@sentry/nuxt';
+
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  devtools: { enabled: true },
+  modules: ['@sentry/nuxt'],
+
+  runtimeConfig: {
+    public: {
+      sentry: {
+        dsn: '' /* DSN */,
+        debug: true,
+      },
+    },
+  },
+});

apps/nuxt/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@sentry/nuxt": "file:.yalc/@sentry/nuxt",
+    "nuxt": "^3.12.2",
+    "vue": "^3.4.29",
+    "vue-router": "^4.3.3"
+  }
+}

apps/nuxt/pages/catchAll/[...id].vue

@@ -0,0 +1,3 @@
+<template>
+  <div>test-{{ $route.params.id }}</div>
+</template>

apps/nuxt/pages/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div><button @click="triggerError">Trigger Error</button><br /></div>
+</template>
+
+<script>
+export default {
+  methods: {
+    triggerError() {
+      throw new Error('This is a test error for Sentry');
+    },
+  },
+};
+</script>

apps/nuxt/pages/test-param/[param].vue

@@ -0,0 +1,3 @@
+<template>
+  <p>{{ $route.params.param }} - {{ $route.params.param }}</p>
+</template>

apps/nuxt/public/favicon.ico

@@ -0,0 +1,5 @@
+export default defineEventHandler(event => {
+  const param = getRouterParam(event, 'param');
+
+  return `Param: ${param}!`;
+});

apps/nuxt/server/api/test-param/[param].ts

@@ -0,0 +1,5 @@
+export default defineEventHandler(event => {
+  if ('api' in getQuery(event)) {
+    throw new Error('Server middleware error');
+  }
+});

apps/nuxt/server/middleware/error.ts

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

apps/nuxt/server/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}

apps/nuxt/tsconfig.json

@@ -65,6 +65,7 @@
     "apps/astro",
     "apps/nextjs-13_2_0",
     "apps/nextjs-14_2_1",
+    "apps/nuxt",
     "apps/sveltekit-2",
     "apps/remix"
   ],