DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

John Liu
John Liu

Posted on

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

Project Debriefing

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

Astronomy of the Day Gallery

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!

Table of Contents

  1. Prerequisites
  2. 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
Enter fullscreen mode Exit fullscreen mode

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.

    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

  3. Once you let the Vue CLI create the template vanilla vue app, you should get a success message like this. (Note the emojis πŸ˜„.)
    Success message from Vue CLI that Vue app is created

    πŸ–ŠοΈ 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

    npm run serve
    

    and it should start up the vue app!
    Vue app successfully loading in browser

  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 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.
    Success message that code was pushed to Github repository


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)
Build A Simple Vue 3 App and Enjoy Astronomy! (Part 3 of 3)

Top comments (1)

Collapse
 
holaguedis profile image
Guedis

I'm usually in the world of React, so it was neat to learn more about Vue!
Also, I like your first two prerequisites! πŸ˜‰ 🐢

Tired of sifting through your feed?

You can change your feed and see more relevant posts by adding a rating to different tags on DEV. Head here to adjust your weights.