{"id":22489329,"url":"https://github.com/L422Y/nuxt-pageviews","last_synced_at":"2025-08-02T21:32:37.164Z","repository":{"id":94064755,"uuid":"607639222","full_name":"L422Y/nuxt-pageviews","owner":"L422Y","description":"Nuxt module that provides page view counts using Google Analytics Data API (GA4) ","archived":false,"fork":false,"pushed_at":"2024-01-03T00:49:39.000Z","size":394,"stargazers_count":24,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-12-05T00:01:48.958Z","etag":null,"topics":["analytics","google-analytics-api","nuxt","nuxt-module","typescript","vue"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/L422Y.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-28T11:38:07.000Z","updated_at":"2024-10-15T00:42:10.000Z","dependencies_parsed_at":null,"dependency_job_id":"f873c46d-cb9b-4a19-a08f-f36402276fde","html_url":"https://github.com/L422Y/nuxt-pageviews","commit_stats":{"total_commits":42,"total_committers":2,"mean_commits":21.0,"dds":"0.023809523809523836","last_synced_commit":"0f0ba1feb9d6c2d09909cdabe1eb5d8c4840d8a8"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/L422Y%2Fnuxt-pageviews","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/L422Y%2Fnuxt-pageviews/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/L422Y%2Fnuxt-pageviews/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/L422Y%2Fnuxt-pageviews/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/L422Y","download_url":"https://codeload.github.com/L422Y/nuxt-pageviews/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228500221,"owners_count":17930020,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["analytics","google-analytics-api","nuxt","nuxt-module","typescript","vue"],"created_at":"2024-12-06T17:19:39.767Z","updated_at":"2025-08-02T21:32:37.154Z","avatar_url":"https://github.com/L422Y.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Nuxt Page Views Module\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![License][license-src]][license-href]\n[![Nuxt][nuxt-src]][nuxt-href]\n\nThis is a module for Nuxt that provides page views tracking using Google Analytics Data API.\n\nBuilt with Nuxt/Vue 3, TypeScript, and H3.\n\n### Features\n\n- Quick setup if you're already running Google Analytics\n- SSR Support\n- Cached responses from the Google Analytics Data API\n- Expose `usePageViews()` composable\n\n## Installation\n\n1. Add `nuxt-pageviews` dependency to your project\n\n```bash\n# Using pnpm\npnpm add -D nuxt-pageviews\n\n# Using yarn\nyarn add --dev nuxt-pageviews\n\n# Using npm\nnpm install --save-dev nuxt-pageviews\n```\n\n2. Add `nuxt-pageviews` to the `modules` section of `nuxt.config.ts`\n\n```js\nexport default defineNuxtConfig({\n  modules: [\n    'nuxt-pageviews'\n  ]\n})\n```\n\n## Configuration\n\n### Google Analytics Setup\n\nYou will need to configure a new service account, and add its email address to the GA property you would like to access.\n\nHere are the steps to set up credentials for use with @google-analytics/data:\n\n1. Go to the [Google Cloud Console](https://console.cloud.google.com/).\n1. Create a new project or select an existing project.\n1. Enable the Google Analytics API for your project:\n2. Go to the APIs \u0026 Services dashboard, click on \"Enable\n   APIs and Services\", and search for \"Google Analytics API\". Then click \"Enable\".\n1. Create credentials for your project:\n2. Go to the \"Credentials\" page in the APIs \u0026 Services dashboard and\n   click \"Create credentials\". Select \"Service Account\" as the credential type and enter the required information.\n  3. Make sure to add the appropriate scopes for the API you're using (in this case,` https://www.googleapis.com/auth/analytics.readonly`).\n1. Once you've created the service account, download the JSON key file for the service account. This file will contain\n   the private key that you'll need to authenticate with the API, as well as the service account \"email\" address you will need to add as a user to your Analytics property.\n\n### Nuxt Configuration\n\nTo use this plugin, you need to provide a Google service account credentials file, a Google Analytics property ID, and\nan endpoint for the API that will serve the data.\n\nIn your `nuxt.config.ts` file, configure the options for the module:\n\n```ts\nexport default defineNuxtConfig({\n  pageViews: {\n    credentialsFile: \"./src/creds.json\",\n    // OR\n    credentials: {/* contents of credentials file */},\n    propertyId: \"12345678\",\n    endpoint: \"/api/views\",\n    preload: true, // preload analytics data on startup (default: true)\n    exact: false, // if exact is false, the module will merge urls that are the same when the trailing slash is removed\n    startDate: \"2021-01-01\", // Get data starting at this date\n    cacheTimeout: 15 * 60, // Cache half-life (in seconds)\n    debug: false // Debug mode, will show timings and refreshes\n  }\n})\n```\n\n## Using\n\nYou can use the `usePageViews` composable to access the page views count for a specific page:\n\n```vue\n\u003cscript lang=\"ts\" setup\u003e\nconst views = await usePageViews()\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cdiv\u003eBlog views: {{ views }}\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\nYou can also pull the counts for other paths:\n\n```vue\n\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cdiv\u003ePage views: {{ views }}\u003c/div\u003e\n    \u003cdiv\u003eBlog views: {{ blogViews }}\u003c/div\u003e\n    \u003cdiv\u003eProject List views: {{ projectViews }}\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nconst views = await usePageViews()\nconst blogViews = await usePageViews(\"/blog\")\nconst projectViews = await usePageViews(\"/projects\")\n\u003c/script\u003e\n```\n\n## Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Generate type stubs\nnpm run dev:prepare\n\n# Develop with the playground\nnpm run dev\n\n# Build the playground\nnpm run dev:build\n\n# Run ESLint\nnpm run lint\n\n# Run Vitest\nnpm run test\nnpm run test:watch\n\n# Release new version\nnpm run release\n```\n\n## [✨ Change Log](/CHANGELOG.md)\n\n## License\n\nThis plugin is licensed under the MIT License. See the LICENSE file for more information.\n\n\n\u003c!-- Badges --\u003e\n\n[npm-version-src]: https://img.shields.io/npm/v/nuxt-pageviews/latest.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n\n[npm-version-href]: https://npmjs.com/package/nuxt-pageviews\n\n[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-pageviews.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n\n[npm-downloads-href]: https://npmjs.com/package/nuxt-pageviews\n\n[license-src]: https://img.shields.io/npm/l/nuxt-pageviews.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n\n[license-href]: https://npmjs.com/package/nuxt-pageviews\n\n[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js\n\n[nuxt-href]: https://nuxt.com\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FL422Y%2Fnuxt-pageviews","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FL422Y%2Fnuxt-pageviews","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FL422Y%2Fnuxt-pageviews/lists"}