https://github.com/rihanarfan/partykit-nuxt

Use PartyKit 🎉 with Nuxt 💚
https://github.com/rihanarfan/partykit-nuxt

nuxt partykit vue

Last synced: about 1 month ago
JSON representation

Use PartyKit 🎉 with Nuxt 💚

• Host: GitHub
• URL: https://github.com/rihanarfan/partykit-nuxt
• Owner: RihanArfan
• Created: 2024-06-20T16:30:50.000Z (6 months ago)
• Default Branch: master
• Last Pushed: 2024-11-04T09:59:12.000Z (about 2 months ago)
• Last Synced: 2024-11-08T16:50:10.474Z (about 2 months ago)
• Topics: nuxt, partykit, vue
• Language: TypeScript
• Homepage: https://npmjs.com/package/partykit-nuxt
• Size: 406 KB
• Stars: 11
• Watchers: 1
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# 🎉 partykit-nuxt

[![npm version][npm-version-src]][npm-version-href]

[![npm downloads][npm-downloads-src]][npm-downloads-href]

[![License][license-src]][license-href]

[![Nuxt][nuxt-src]][nuxt-href]

Use PartyKit 🎉 with Nuxt 💚

Vue port of PartySocket (PartyKit's Client API), powered by VueUse's [useWebSocket](https://vueuse.org/core/useWebSocket/).

- [✨  Release Notes](/CHANGELOG.md)

## Features

- ↔️  usePartySocket() - Vue PartySocket composable

## Roadmap

- Automatically start PartyKit server with Nuxt

## Quick Setup

Install the module to your Nuxt application with one command:

```bash

npx nuxi module add partykit-nuxt

```

That's it! You can now use partykit-nuxt in your Nuxt app ✨

## Documentation

### `usePartySocket()`

```ts

const { close, data, id, open, send, status, ws } = usePartySocket({

  host: 'localhost:1999',

  room: 'room',

  immediate: false,

  autoReconnect: true,

  query: {

    token: accessToken,

  },

})

```

## Contribution

  Local development

  ```bash

  # Install dependencies

  npm install

  # Generate type stubs

  npm run dev:prepare

  # Develop with the playground

  npm run dev

  # Build the playground

  npm run dev:build

  # Run ESLint

  npm run lint

  # Run Vitest

  npm run test

  npm run test:watch

  # Release new version

  npm run release

  ```

[npm-version-src]: https://img.shields.io/npm/v/partykit-nuxt/latest.svg?style=flat&colorA=020420&colorB=00DC82

[npm-version-href]: https://npmjs.com/package/partykit-nuxt

[npm-downloads-src]: https://img.shields.io/npm/dm/partykit-nuxt.svg?style=flat&colorA=020420&colorB=00DC82

[npm-downloads-href]: https://npmjs.com/package/partykit-nuxt

[license-src]: https://img.shields.io/npm/l/partykit-nuxt.svg?style=flat&colorA=020420&colorB=00DC82

[license-href]: https://npmjs.com/package/partykit-nuxt

[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js

[nuxt-href]: https://nuxt.com