https://github.com/safrmo/vue3-boardgame

Vue 3 plugin for boardgame.io
https://github.com/safrmo/vue3-boardgame

boardgame boardgame-io plugin vue3

Last synced: about 1 month ago
JSON representation

Vue 3 plugin for boardgame.io

• Host: GitHub
• URL: https://github.com/safrmo/vue3-boardgame
• Owner: SaFrMo
• Created: 2021-08-18T19:16:08.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-03-21T14:39:14.000Z (over 2 years ago)
• Last Synced: 2024-04-28T05:11:34.470Z (7 months ago)
• Topics: boardgame, boardgame-io, plugin, vue3
• Language: TypeScript
• Homepage:
• Size: 199 KB
• Stars: 5
• Watchers: 2
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Vue 3 + boardgame.io

This is a plugin to make developing a Vue 3/[boardgame.io](https://boardgame.io/) app easier.

## Installation

`npm install vue3-boardgame boardgame.io`

Then, [create your Vue 3 app](https://v3.vuejs.org/guide/instance.html) and install:

```js

import { createApp } from 'vue'

import App from 'YourApp.vue'

import { boardgamePlugin } from 'vue3-boardgame'

const app = createApp(App)

app.use(boardgamePlugin, { 

    // select one of the following:

    options: {},    // an object describing your client options

                    // this will be fed directly into the boardgame.io/Client method

                    // see https://boardgame.io/documentation/#/tutorial?id=defining-a-game

    // OR

    client: {},     // an already-initialized boardgame.io client

    // other options

    autostart: true,    // whether or not to start the client automatically

                        // if false, you must start the client yourself

                        // default true

    useMixin: true,     // whether to register special properties (see below) to a mixin

                        // default true

    useProvide: false,  // whether to register special properties (see below) using `provide`

                        // default false

})

app.mount('#app')

```

## Usage

From there, each component in your app has access to:

* `G`: a reactive object describing the current game state

* `ctx`: a reactive object describing the current boardgame.io context

* `client`: a reactive object describing the client

* `moves`: an object containing all the moves of your game

For example, in a `.vue` file:

```html

    


        

    


    Play Move

export default {

    mounted(){

        console.log(this.G)

    },

    methods: {

        playMove(){

            this.moves.playMove()

        }

    }

}

```

## Typescript

For the best Typescript experience, add the following code in your types file (for example, `src/game-types.d.ts`):

```js

declare module '@vue/runtime-core' {

    export interface ComponentCustomProperties {

        G: YourGameStateType

    }

}

```

This way you'll be able to access `this.G` from any component and see autocompletion, types, etc.