Build A Simple Vue 3 App and Enjoy Astronomy! (Part 1 of 3)
Tags: beginners, vue, javascript
Published: 2022-01-13 20:21:44

## Project Debriefing

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

[Astronomy of the Day Gallery](https://nasa-demo-devto.onrender.com/
)

This website is powered by Vue.js (Vue 3) and a fun API provided by [NASA](https://api.nasa.gov/#apod). 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 :roll_eyes:).

OK, so let's get right into it!

### _Table of Contents_ 
1. [Prerequisites](#prerequisites)
2. [Set Up](#setup)

---

## <a name="prerequisites"></a> Prerequisites 
* Say to yourself, "you can do it!" 3x
* Pet a dog when you see one (or cat, or small human). 
* Install [VS Code](https://code.visualstudio.com/Download) (or any code editor of choice). And here's a really nice detail on [how to set up VS Code for Vue JS development](https://www.vuemastery.com/blog/vs-code-for-vuejs-developers/).
* Install [NPM](https://v3.vuejs.org/guide/installation.html#npm)
* Install [Vue CLI](https://v3.vuejs.org/guide/installation.html#cli) (Note: In order to use the CLI, you’ll need to have Node.js version 8.9 or above.)
* Get [NASA API Key](https://api.nasa.gov/#signup). It's free!
* _Optional_: Get a [GitHub account](https://github.com) 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](https://dev.to/stoicllama/build-a-simple-vue-3-app-and-enjoy-astronomy-part-2-of-3-27g5), first clone the starter template repo to your local computer (git command below) and use the main branch.
```bash
git clone https://github.com/stoic-llama/nasa-demo-devto.git
```

## <a name="setup"></a> Set Up 
1. Create vanilla vue app from your terminal with Vue CLI. Type `vue create nasa-demo-devto` in the terminal and click enter.
    ```bash
    vue create nasa-demo-devto
    ```

2. 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.
    ![Final selection menu with responses above before creating vanilla Vue app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s2th5ao2qon477v5milu.png)

3. Once you let the Vue CLI create the template vanilla vue app, you should get a success message like this. (Note the emojis :smile:.)
![Success message from Vue CLI that Vue app is created](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kn73gvqy1q942k468j99.png)

    :pen: **_Tip:_** Somewhere in the installation process the Vue CLI may ask for you to create node_modules folder. Click yes.  

4. Now in your terminal type
    ```bash
    npm run serve
    ```
    and it should start up the vue app!
    ![Vue app successfully loading in browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dm63scay06yz14qesayi.png)

5. **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](https://github.com/new) 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.)
    ```bash
    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.
    ![Success message that code was pushed to Github repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ohyf51v1707e7y24i9ot.png)

---
## Article Series

Click on Part 2 to start coding the application!

Build A Simple Vue 3 App and Enjoy Astronomy! (Part 1 of 3)
[Build A Simple Vue 3 App and Enjoy Astronomy! (Part 2 of 3)](https://dev.to/stoicllama/build-a-simple-vue-3-app-and-enjoy-astronomy-part-2-of-3-27g5)
[Build A Simple Vue 3 App and Enjoy Astronomy! (Part 3 of 3)](https://dev.to/stoicllama/build-a-simple-vue-3-app-and-enjoy-astronomy-part-3-of-3-1cc1)