Introduction

What We're Making:

Today we'll make our first Vue 3 app. This tutorial will serve as a basic guide on how users completely new to Vue.js can get started and create their first app.

What Is Vue 3?

Vue 3 is a javascript framework used to accelerate development of beautiful, progressive web apps. It was created by Evan You. You can read more about the history here.

Why Not React?

Good question: go ask a magic-8 ball.

What Do You Like About Vue 3?

Now, this I can answer. I like Vue 3 because the composition API allows you to do things with startling ease, and I’ll demonstrate some of those in later posts. Let's get crackin'.

Getting Started

Pre-Reqs

1. 1. Terminal
2. 2. IDE (I'll be using VSCode)
3. 3. Node.js

Local Setup

Install Dependencies

a. Open terminal and run: npm create vue@latest

b. Press Y to the prompt

c. Type your project name

d. You'll be prompted with configuration options. Here hopw I generally configure my vue files.:



Here's a plain text of that config: ✔ Project name: … hello-wat

✔ 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

✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

Run Your App

a. In your terminal run the following command:

cd project-name
npm install
npm run dev


b. Voilà! There you have it. You've just made your very first vue 3 app. You should see this output in your terminal.

c. Open your http://localhost:5173/ and you should see your app!

Going Further

In future blogs, we'll go over a breakdown of components, and how to create your own vue components. Further down the line, we'll talk about styling and vite.

Check back for new posts!