Build A Simple Vue 3 App and Enjoy Astronomy! (Part 1 of 3)

#beginners #vue #javascript

Project Debriefing

A picture is worth a thousand words. Here's what we're going to build today.

This website is powered by Vue.js (Vue 3) and a fun API provided by NASA. When you call the NASA API, it will return a beautiful picture of our universe, with some additional information like title and description (...and copyright - always acknowledge the source 🙄).

OK, so let's get right into it!

Prerequisites
Set Up

Prerequisites

Say to yourself, "you can do it!" 3x
Pet a dog when you see one (or cat, or small human).
Install VS Code (or any code editor of choice). And here's a really nice detail on how to set up VS Code for Vue JS development.
Install NPM
Install Vue CLI (Note: In order to use the CLI, you’ll need to have Node.js version 8.9 or above.)
Get NASA API Key. It's free!
Optional: Get a GitHub account so you can use the Github account code repository (aka 'repo') later to host your website online if you choose to do so.

Note: If you want to go straight to coding the Vue app, you can skip the rest of Part 1 (Set Up section below). But before you move on to Part 2, first clone the starter template repo to your local computer (git command below) and use the main branch.

git clone https://github.com/stoic-llama/nasa-demo-devto.git

Set Up

Create vanilla vue app from your terminal with Vue CLI. Type vue create nasa-demo-devto in the terminal and click enter.
```
vue create nasa-demo-devto
```
Follow the wizard of the Vue CLI and provide the following answers to finish the set up of the vanilla vue app.
a. Select Manually select features
b. Select Router
c. Select 3.x
d. Type in y
e. Select ESLint + Prettier
f. Select Lint on save
g. Select In package.json
h. Select n

The final configuration responses from you should be like so below.
Once you let the Vue CLI create the template vanilla vue app, you should get a success message like this. (Note the emojis 😄.)

🖊️ Tip: Somewhere in the installation process the Vue CLI may ask for you to create node_modules folder. Click yes.
Now in your terminal type
```
npm run serve
```
and it should start up the vue app!
Optional: Push your source code to Github. You can use this repository on Github later for hosting a website for your app.
a. Create a repo under your Github account and call it nasa-demo-devto.
b. Type in the follow Git commands to push your local files up to Github repository online. (You may have noticed that I added an initial commit. This was done so I could include the .gitignore file that was added as part of the set up process in prior steps.)
```
git remote add origin https://github.com/<_your_Github_account_name_>/nasa-demo-devto.git
git branch -M main
git add . 
git commit -m "Initial Setup"
git push -u origin main
```
c. Finally you should be able to see the success message that your code was pushed to Github.