https://github.com/deemaagog/vue-pgn

A Vue.js component for browsing chess games in pgn format.
https://github.com/deemaagog/vue-pgn

Last synced: 8 months ago
JSON representation

A Vue.js component for browsing chess games in pgn format.

• Host: GitHub
• URL: https://github.com/deemaagog/vue-pgn
• Owner: deemaagog
• Created: 2018-03-17T22:23:38.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-03-28T09:09:58.000Z (over 7 years ago)
• Last Synced: 2025-03-18T16:07:09.179Z (9 months ago)
• Language: Vue
• Homepage:
• Size: 547 KB
• Stars: 6
• Watchers: 0
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-vue-zh - vue-pgn - 用于以pgn格式查看国际象棋游戏的Vue.js组件 (UI组件 / 杂)
• awesome-vue - vue-pgn - A Vue.js component for browsing chess games in pgn format. ` 📝 3 years ago` (UI Components [🔝](#readme))
• awesome-vue - vue-pgn ★3 - Vue.js component for viewing chess games in pgn format (UI Components / Miscellaneous)
• awesome-vue - vue-pgn - Vue.js component for viewing chess games in pgn format (UI Components / Miscellaneous)
• awesome-vue - vue-pgn - Vue.js component for viewing chess games in pgn format (Components & Libraries / UI Components)

README

          
# vue-pgn

[![npm](https://img.shields.io/npm/v/vue-pgn.svg) ![npm](https://img.shields.io/npm/dm/vue-pgn.svg)](https://www.npmjs.com/package/vue-pgn)

[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)

A Vue.js component for browsing chess games in pgn format. Uses [chess.js](https://github.com/jhlywa/chess.js) under the hood.

Demo: [https://deemaagog.github.io/vue-pgn/](https://deemaagog.github.io/vue-pgn)

# Installation

```

npm install --save vue-pgn

```

## Import

```javascript

import {vuepgn} from 'vue-pgn'

import 'vue-pgn/dist/vue-pgn.css'

export default {

  components: {vuepgn},

  data() {

    return {

      pgn: '1. g4 e5 2. f4 Qh4',

      height: 300,

    };

  },

};

  
    

    

  


```

## Browser

```html



  



new Vue({

  el: '#app',

  components: {

    VuePgn

  },

  data() {

    return {

      pgn: '1. g4 e5 2. f4 Qh4',

      height: 300,

    };

  }

});

```

## License

[MIT](http://opensource.org/licenses/MIT)