Skip to content

Commit f48623c

Browse files
HugoRCDatinux
andauthored
feat(nuxt): Add support for injectSpeedInsights() and Nuxt module (#104)
Co-authored-by: Sébastien Chopin <[email protected]>
1 parent 23ab42e commit f48623c

28 files changed

Lines changed: 7121 additions & 6267 deletions

.nvmrc

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
18.19
1+
22.21.0

apps/nuxt/app/app.vue

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<script setup lang="ts">
2+
/**
3+
* Uncomment only when disabling the module in nuxt.config.ts
4+
* As well as using the deprected <SpeedInsights> component
5+
* We recommend using the module or the injectSpeedInsights function in a Nuxt plugin
6+
*/
7+
// import { SpeedInsights, type BeforeSendMiddleware } from '@vercel/speed-insights/nuxt';
8+
9+
// const beforeSend = (event: BeforeSendMiddleware) => {
10+
// console.log('Sending event:', event);
11+
// return event;
12+
// };
13+
</script>
14+
15+
<template>
16+
<!-- <SpeedInsights :before-send="beforeSend" /> -->
17+
<NuxtLayout>
18+
<NuxtPage />
19+
</NuxtLayout>
20+
</template>

apps/nuxt/app/assets/logo.svg

Lines changed: 1 addition & 0 deletions
Loading
Lines changed: 4 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,15 @@
1-
<script setup lang="ts">
2-
import { SpeedInsights } from '@vercel/speed-insights/nuxt';
3-
</script>
4-
51
<template>
6-
<SpeedInsights />
72
<header>
8-
<img
9-
alt="Vue logo"
10-
class="logo"
11-
src="@/assets/logo.svg"
12-
width="125"
13-
height="125"
14-
/>
15-
3+
<img alt="Nuxt logo" class="logo" src="@/assets/logo.svg" width="180" />
164
<div class="wrapper">
175
<nav>
186
<NuxtLink to="/">Home</NuxtLink>
197
<NuxtLink to="/blog/various/hi">Hi!</NuxtLink>
208
<NuxtLink to="/blog/various/hallo">Hallo!</NuxtLink>
219
</nav>
2210
</div>
11+
<slot />
2312
</header>
24-
<slot />
2513
</template>
2614

2715
<style>
@@ -30,11 +18,12 @@ import { SpeedInsights } from '@vercel/speed-insights/nuxt';
3018
header {
3119
line-height: 1.5;
3220
max-height: 100vh;
21+
text-align: center;
3322
}
3423
3524
.logo {
3625
display: block;
37-
margin: 0 auto 2rem;
26+
margin: 2rem auto 2rem;
3827
}
3928
4029
nav {

apps/nuxt/app/pages/blog.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<template>
2+
<h2>Blog</h2>
3+
<NuxtPage />
4+
</template>
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<script setup lang="ts">
2+
const route = useRoute();
3+
const category = route.params.category;
4+
</script>
5+
6+
<template>
7+
<h2>Category: {{ category }}</h2>
8+
<NuxtPage />
9+
</template>

apps/nuxt/pages/blog/[category]/[slug].vue renamed to apps/nuxt/app/pages/blog/[category]/[slug].vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,5 @@ const route = useRoute();
55
<template>
66
<div class="greetings">
77
<h1 class="green">{{ route.params.slug }}!</h1>
8-
<h3>Category {{ route.params.category }}</h3>
98
</div>
109
</template>

apps/nuxt/app/pages/index.vue

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<div class="greetings">
3+
<h1>You did it!</h1>
4+
</div>
5+
</template>

0 commit comments

Comments
 (0)