Setting up the project

Let’s start by setting up a project for our incremental game with create-vue, a tool for rapidly scaffolding a Vue project:

npm create vue@3

If you’ve never used create-vue before, you’ll be prompted to confirm installation. Go ahead and proceed.

You’ll be prompted to enter a project name. I’ll be using pinia-clicker for the duration of this tutorial.

You’ll be asked whether you want to install TypeScript. Since this demo uses TypeScript, choose yes.

As for the rest of the questions, the only thing I included was Pinia. Here’s what my terminal looks like now that I’m done:

Vue.js - The Progressive JavaScript Framework

✔ Project name: … pinia-clicker
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No / Yes

Scaffolding project in /Users/jesselawson/dev/pinia-clicker...

Done. Now run:

  cd pinia-clicker
  npm install
  npm run dev

Follow the directions (cd into your project dir and run the commands above). When you’re finished, you will have started the Vite development server and should be able to open the link in your terminal to view your application.

With the project scaffolded, we’re ready to get started building the game.