https://github.com/HugoRCD/nuxt-visitors
Add real-time visitor tracking to your Nuxt app with one line of code. WebSocket made easy
https://github.com/HugoRCD/nuxt-visitors
analytics nuxt realtime visitors websocket
Last synced: 7 months ago
JSON representation
Add real-time visitor tracking to your Nuxt app with one line of code. WebSocket made easy
- Host: GitHub
- URL: https://github.com/HugoRCD/nuxt-visitors
- Owner: HugoRCD
- License: apache-2.0
- Created: 2025-01-28T08:40:40.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-02-21T11:07:58.000Z (8 months ago)
- Last Synced: 2025-02-21T12:22:32.351Z (8 months ago)
- Topics: analytics, nuxt, realtime, visitors, websocket
- Language: TypeScript
- Homepage: https://nuxt-visitors.nuxt.dev/
- Size: 467 KB
- Stars: 65
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Funding: .github/funding.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-nuxt - Nuxt Visitors
README
# Nuxt Visitors 👀
[](https://npmjs.com/package/nuxt-visitors)
[](https://npm.chart.dev/nuxt-visitors)
[](https://github.com/HugoRCD/nuxt-visitors/blob/main/LICENSE)
Add live visitor counting to your Nuxt website in seconds. WebSocket-based, type-safe, and completely automatic.
## Features ⚡️
- 🔄 Real-time updates via WebSocket
- 🪄 Zero configuration needed
- 🛠 Automatic connection management
- 📊 Type-safe composable
- 🧹 Auto cleanup on unmount
- 🌐 Leverages [Nitro WebSocket](https://nitro.unjs.io/guide/websocket) with Pub/Sub
## Installation
Install the module to your Nuxt application with one command:
```bash
npx nuxi module add nuxt-visitors
```
As [Nitro WebSocket support](https://nitro.unjs.io/guide/websocket) is experimental, you need to enable it in your `nuxt.config.ts`:
```ts
export default defineNuxtConfig({
modules: ['nuxt-visitors'],
nitro: {
experimental: {
websocket: true
}
}
})
```
## Usage
```vue
const { visitors } = useVisitors()
Active users: {{ visitors }}
```
That's it! The module handles everything else automatically:
- WebSocket connection management
- Real-time updates
- Reconnection logic
- Error handling
### Advanced usage
The composable provides additional features:
```ts
const {
visitors, // Ref - Current visitor count
isConnected, // Ref - Connection status
isLoading, // Ref - Loading state
error, // Ref - Error message if any
reconnect // () => void - Manual reconnection
} = useVisitors()
```
## Contributing
To start contributing, you can follow these steps:
1. First raise an issue to discuss the changes you would like to make.
2. Fork the repository.
3. Create a branch using conventional commits and the issue number as the branch name. For example, `feat/123` or `fix/456`.
4. Make changes following the local development steps.
5. Commit your changes following the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification.
6. If your changes affect the code, run tests using `bun run test`.
7. Create a pull request following the [Pull Request Template](https://github.com/HugoRCD/markdown/blob/main/src/pull_request_template.md).
- To be merged, the pull request must pass the tests/workflow and have at least one approval.
- If your changes affect the documentation, make sure to update it.
- If your changes affect the code, make sure to update the tests.
8. Wait for the maintainers to review your pull request.
9. Once approved, the pull request will be merged in the next release !
Published under the [APACHE](https://github.com/HugoRCD/nuxt-visitors/blob/main/LICENSE) license.
Made by [@HugoRCD](https://github.com/HugoRCD) and [community](https://github.com/HugoRCD/nuxt-visitors/graphs/contributors) 💛
---
_🤖 auto updated with [automd](https://automd.unjs.io) (last updated: Tue Jan 28 2025)_