npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

nuxt-cloudflare-analytics

v1.0.8

Published

Cloudflare Web Analytics Modules for NuxtJS

Downloads

2,628

Readme

Nuxt Cloudflare Web Analytics Modules

npm version npm downloads

Add Cloudflare Web Analytics to your Nuxt Project. The latest versions, above 1.0.8+ are made for Nuxt 3, if you want to use nuxt 2, use 0.1.5

Note: this modules is not enabled in dev mode. You can set environment variable NODE_ENV to production for testing in dev mode.

Setup

  • Add nuxt-cloudflare-analytics dependency using yarn or npm to your project npm i nuxt-cloudflare-analytics or yarn install nuxt-cloudflare-analytics
  • Add nuxt-cloudflare-analytics to modules section of nuxt.config.ts
{
  // either
  modules: [
    [
      'nuxt-cloudflare-analytics',
      {
        // See below for more options
        token: 'your-token', // Example 1a2b3v4a5er6ac7r8afd
      },
    ],
  ]

  // or
  modules: [
    'nuxt-cloudflare-analytics'
  ],
  cloudflareAnalytics: {
    // See below for more options
    token: 'your-token', // Example 1a2b3v4a5er6ac7r8afd
  }
}

You can find token on Web Aalytics Page at Cloudflare Dashboard.

Options

token (!string)

  • Required
  • Cloudflare analytics token, example: 1a2b3v4a5er6ac7r8afd

scriptPath (string | false | undefined)

  • (Optional), defaults to /_ca/b.js. This is the beacon.min.js from cloudflare.
  • You can set it to false to not use a local script and instead use the CDN script (https://static.cloudflareinsights.com/beacon.min.js). This is not recommended though, since some browsers may not load this script otherwise.
  • You can set it to a custom path to define where your local script is. This must be a .js file inside your public folder. So if you have this file under public/my/beacon.js, you should set this option to my/beacon.js.

proxyPath (string | false | undefined)

  • (Optional), defaults to false.
  • You can set it to a custom path to generate a proxy nuxt server api endpoint. This must start with /api. E.g. set proxyPath to /api/_ca/p, then the module will automatically
    • Generate this endpoint
    • Change the scriptPath to use this endpoint (as long as you don't set it to something own)
  • The automatically created proxy endpoint is used to send data to Cloudflare.
    • Benefit: This avoids some browsers blocking this request.
    • Downside: Depending where you host your page, cloudflare will take this country as the origin of the page click. So if you host your page in the US (e.g. vercel) but your visitor is from Germany, you will see the US as the origin of the click in your dashboard.
  • You can set it to false to not use a proxy and directly call cloudflare. Be prepared that some browsers may block the request and you will not see any data.
  • If you have another solution for this, e.g. vercels rewrite config, set proxyPath to false and define a customProxyPath (see below).

customProxyPath (string | undefined)

  • (Optional), defaults to undefined. Only define this if you set proxyPath to false.
  • This is the path to your custom proxy endpoint, e.g. from vercels rewrite config.
  • e.g.
// nuxt.config.ts
{
  cloudflareAnalytics: {
    token: 'your-token', // Example 1a2b3v4a5er6ac7r8afd
    proxyPath: false,
    customProxyPath: '/my-proxy'
  }
}
// vercel.json
{
	"rewrites": [{ "source": "/my-proxy", "destination": "https://cloudflareinsights.com/cdn-cgi/rum" }]
}

Contributors

  • hamlogic (https://github.com/hamlogic)
  • madebyfabian (https://github.com/madebyfabian)

License

MIT © Hamjs

Development

  • Clone repo
  • Install dependencies
  • Switch into Take Over Mode
  • Ensure local files are generated using npm run dev:prepare
  • Start playground using npm run dev
  • Follow this document to learn more about Nuxt modules: https://nuxt.com/docs/guide/going-further/modules