feat: vue and nuxt route support

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/README.md

@@ -0,0 +1,29 @@
+# Nuxt 3 Demo application for Vercel Speed-insights
+
+## Setup
+
+This application was created with the following commands:
+
+- `cd apps`
+- `pnpx nuxi@latest init nuxt` (answers: npm, no git)
+- `cd nuxt`
+- `rm -rf node_modules .nuxt`
+- manually edit package.json to add `"@vercel/speed-insights": "workspace:*"` dependency
+- `pnpm i`
+
+Then we moved some code from vue's official template (styles, HelloWorld SFC) and added a few dynamic route to illustrate the use.
+We also imported and used `<WebAnalytics />` component in `layouts/default.vue` file:
+
+```vue
+<script setup>
+import { WebAnalytics } from '@vercel/analytics/vue';
+</script>
+
+<template>
+  <WebAnalytics />
+</template>
+```
+
+## Usage
+
+Start it with `pnpm -F nuxt dev` and browse to [http://localhost:3000](http://localhost:3000)

apps/nuxt/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>

apps/nuxt/assets/base.css

@@ -0,0 +1,74 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition: color 0.5s, background-color 0.5s;
+  line-height: 1.6;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

apps/nuxt/assets/main.css

@@ -0,0 +1,38 @@
+@import './base.css';
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+
+  font-weight: normal;
+}
+
+a,
+.green {
+  text-decoration: none;
+  color: hsla(160, 100%, 37%, 1);
+  transition: 0.4s;
+}
+
+h1 {
+  font-weight: 500;
+  font-size: 2.6rem;
+  position: relative;
+  top: -10px;
+}
+
+h3 {
+  font-size: 1.2rem;
+}
+
+.greetings h1,
+.greetings h3 {
+  text-align: center;
+}
+
+@media (hover: hover) {
+  a:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+  }
+}

apps/nuxt/layouts/default.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { WebAnalytics } from '@vercel/analytics/nuxt';
+import { track } from '@vercel/analytics';
+
+function navigate(event) {
+  track('navigation', { to: event.target.href });
+}
+</script>
+
+<template>
+  <WebAnalytics />
+  <header>
+    <img
+      alt="Vue logo"
+      class="logo"
+      src="@/assets/logo.svg"
+      width="125"
+      height="125"
+    />
+    <div class="wrapper">
+      <nav>
+        <NuxtLink @click="navigate" to="/">Home</NuxtLink>
+        <NuxtLink @click="navigate" to="/blog/various/hi">Hi!</NuxtLink>
+        <NuxtLink @click="navigate" to="/blog/various/hallo">Hallo!</NuxtLink>
+      </nav>
+    </div>
+    <slot />
+  </header>
+</template>
+
+<style>
+@import url('~/assets/main.css');
+
+header {
+  line-height: 1.5;
+  max-height: 100vh;
+}
+
+.logo {
+  display: block;
+  margin: 0 auto 2rem;
+}
+
+nav {
+  width: 100%;
+  font-size: 12px;
+  text-align: center;
+  margin: 2rem 0;
+}
+
+nav a.router-link-exact-active {
+  color: var(--color-text);
+}
+
+nav a.router-link-exact-active:hover {
+  background-color: transparent;
+}
+
+nav a {
+  display: inline-block;
+  padding: 0 1rem;
+  border-left: 1px solid var(--color-border);
+}
+
+nav a:first-of-type {
+  border: 0;
+}
+</style>

apps/nuxt/nuxt.config.ts

@@ -0,0 +1,5 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  compatibilityDate: '2024-04-03',
+  devtools: { enabled: true },
+});

apps/nuxt/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "nuxt",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "postinstall": "nuxt prepare",
+    "preview": "nuxt preview"
+  },
+  "dependencies": {
+    "@vercel/analytics": "workspace:*",
+    "nuxt": "^3.14.0",
+    "vue": "latest",
+    "vue-router": "latest"
+  }
+}

apps/nuxt/pages/blog/[category]/[slug].vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+const route = useRoute();
+</script>
+
+<template>
+  <div class="greetings">
+    <h1 class="green">{{ route.params.slug }}!</h1>
+    <h3>Category {{ route.params.category }}</h3>
+  </div>
+</template>

apps/nuxt/pages/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="greetings">
+    <h1>You did it!</h1>
+  </div>
+</template>

apps/nuxt/public/robots.txt

@@ -0,0 +1 @@
+

apps/nuxt/server/tsconfig.json

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

apps/nuxt/tsconfig.json

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

apps/sveltekit/README.md

@@ -14,4 +14,4 @@ This application was created with the following commands:
 
 ## Usage
 
-Start it with `cd apps/sveltekit` + `pnpm dev` and browse to [http://localhost:5173](http://localhost:5173)
+Start it with `pnpm -F sveltekit dev` and browse to [http://localhost:5173](http://localhost:5173)

apps/vue/.gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo

apps/vue/README.md

@@ -0,0 +1,27 @@
+# Vue 3 barebone demo application for Vercel Web Analytics
+
+## Setup
+
+This application was created with the following commands:
+
+- `cd apps`
+- `pnpm create vue@latest vue` (answer no to all questions)
+- `cd vue`
+- manually edit package.json to add `"@vercel/speed-insights": "workspace:*"` dependency
+- `pnpm i`
+
+Then we imported and used `<WebAnalytics />` component in `src/App.vue` file:
+
+```vue
+<script setup>
+import { WebAnalytics } from '@vercel/analytics/vue';
+</script>
+
+<template>
+  <WebAnalytics />
+</template>
+```
+
+## Usage
+
+Start it with `pnpm -F vue dev` and browse to [http://localhost:5173](http://localhost:5173)

apps/vue/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

apps/vue/jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}