feat: vue and nuxt support + fixed exported files

[feugy]

📓 What's in there?

A dedicated component that could also be used with applications, and a fix for exported files

https://vercel.slack.com/archives/C04KC8A53T7/p1700570258506539?thread_ts=1700566622.149479&cid=C04KC8A53T7

🧪 How to test?

I made 2 new testing apps:

• apps/nuxt: an Nuxt application with classical file-based routing
• apps/vue: a barebone vue with no routing (little interest, but ensure compatibility with any vue app)

I considered adding a test application for vue+vue-router (the standard router in vue ecosystem), but since nuxt is based on vue-router, it had little interest.

To test them locally:

• run pnpm i at the root

  so you'll get the new deps

• edit apps/vue/src/App.vue to add scriptSrc="https://va.vercel-scripts.com/v1/speed-insights/script.js" to the new <SpeedInsights /> component

  Unfortunately we can't force NODE_ENV to be production with nuxt: nuxt CLI will override this env var, and we have to explicitly set the script src.

• edit apps/nuxt/layouts/default.vue to do the same
• go to one app and run it: cd apps/nuxt && pnpm dev

  it'll start your app and display the listening port.

• browse the app with your dev tools opened on network, and wait for the next metric collection.

  The POST will fail, but its body will show the collected metrics.

❗ Notes to reviewers

I'll deploy the new example apps as soon as we'll merge this PR. I can't setup the Vercel app until the code is on the main branch.

[linear[bot]]

ALY-1081 Vue Support in @vercel/speed-insights

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
speed-insights-nextjs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 27, 2023 10:30am
speed-insights-remix	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 27, 2023 10:30am
speed-insights-sveltekit	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 27, 2023 10:30am