Building a Tic-Tac-Toe Game with Vue 2

Building a Tic-Tac-Toe Game with Vue 2

Tic-Tac-Vue is a simple JavaScript Single Page Application (SPA) written with Vue, Vuex and Vue Router. Its goal is to be a "case study" for beginners who want to learn Vue and its powerful ecosystem.

Tic-Tac-Vue

Tic-Tac-Vue is a simple JavaScript Single Page Application (SPA) written with Vue, Vuex and Vue Router. Its goal is to be a "case study" for beginners who want to learn Vue and its powerful ecosystem.

Click here to try the online demo version.

View Demo

View Github

This is image title

Table of content

Methodologies

In this project I adopted two methodologies I currently use in MotorK (the company I work with) to have a better factored code and organized source files: BEM and Atomic Design.

BEM

BEM (which means Block Element Modifier) is a methodology that helps you to create reusable components in front-end development. It's all about splitting your CSS classes using Blocks, Elements and Modifiers. The final DOM could be verbose, but you will have a better factored source code and, because of you don't have to nest CSS classes, your CSS bundle will result less heavy.

To read more about BEM pattern, click here.

Atomic Design

Atomic Design is a methodology for creating design systems. Similarly to chemistry, you can organize your components file (in this scenario Vue Single File Components) using atoms, molecules and organisms.

Atoms

Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.

Molecules

Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound.

Organisms

Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.

To read more about Atomic Design pattern, click here.

(This project doesn't have organisms: it only has atoms, molecules and pages.)

Technical skills

First of all, I strongly suggest you to have a look at Vue documentation, especially to:

These are the minimum requirements to have a better approach with Tic-Tac-Vue.

Install

You can install Tic-Tac-Vue cloning the project:

git clone https://github.com/Sanfra1407/tic-tac-vue.git

then install npm dependencies:

npm install

Usage

Since this project has been developed with the amazing Vue-CLI, you can use its own integrated CLI commands to serve or build the application.

Start dev server

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Github

Sanfra1407/Tic-Tac-Vue

vue-js vuejs javascript programming

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue.js Tab Components Based on Vue Router

vue-router-tab .A tab router component based on Vue Router.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.

A Vue.js wrapper component for Grid.js

A Vue wrapper component for Grid.js. Grid.js is a Free and open-source HTML table plugin written in TypeScript. It works with most JavaScript frameworks.

Displaying Modals in a Vue App with the vue-js-modal Library

A modal with many options. Displaying Modals in a Vue App with the vue-js-modal Library. Vue.js is an easy to use web app framework that we can use to develop interactive front end apps. In this article, we’ll look at Vue packages for adding modals with the vue-js-modal library.