vue-triple-t

Table of Contents

• Description
• Installation
• Usage
  • Basic Usage
  • Custom Configuration
• Customize Configuration

Description

vue-triple-t is a simple and customizable Tic-Tac-Toe game built with Vue.js 3. You can easily integrate it into your Vue.js project and tailor it to your specific needs.

Installation

To use vue-triple-t in your Vue.js project, install it via npm:

npm install vue-triple-t

Usage

Basic Usage

To use the game board in its default configuration, simply import {i18n} in your main.js. And the {Board} component and add it to your Vue template:

main.js

import App from './App.vue'
import { createApp } from 'vue'
import { VueTripleTPlugin } from 'vue-triple-t'


createApp(App)
    .use(VueTripleTPlugin)
    .mount('#app')

YourComponent.vue

<template>
  <div>
    <Board/>
  </div>
</template>

<script setup>
import { Board } from 'vue-triple-t'
</script>

Custom Configuration

You can customize the behavior and appearance of the game board by passing parameters to the Board component. Here's an example with custom parameters:

<template>
  <div>
    <Board
        lang="fr"
        board-x=""
        board-o=""
        board-align="center"
        board-color=""
        board-icons-color=""
        board-border-color=""
        board-border="custom"
        appear-transition=""
        score-board=""
        score-board-color=""
        score-board-text-color=""/>
  </div>
</template>

<script setup>
import { Board } from 'vue-triple-t'
</script>

Customize configuration

See Configuration Reference.