Skip to content

Latest commit

 

History

History
54 lines (36 loc) · 1.55 KB

README.md

File metadata and controls

54 lines (36 loc) · 1.55 KB
Raw

Svelte wrapper for Web Vitals

npm version

An Svelte wrapper that provides a simple way to enable Core Web Vitals metrics for the following platforms:

Note

As of the moment, the svelte wrapper is still in development. The current version only supports Vercel - Speed Insights as default. The next version will support other platforms such as Google Analytics, Google Tag Manager, and more.

Prerequisites

An analytics integration is required to use this package. Currently, only Vercel - Speed Insights is supported.

Installation

npm i @rairulyle/svelte-web-vitals -D

Usage

  1. import WebVitals to your root +layout.svelte file.
<script lang="ts">
	import WebVitals from '@rairulyle/svelte-web-vitals';
</script>

<WebVitals />
  1. Define the Analytics ID via vite.config.ts file. As of the moment, only Vercel is supported.
export default defineConfig({
	// Other configs here...
	define: {
		'import.meta.env.VERCEL_ANALYTICS_ID': JSON.stringify(process.env.VERCEL_ANALYTICS_ID)
	}
});

Roadmap

  • Vercel - Speed Insights
  • Google Analytics
  • Google Tag Manager
  • Others