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!
- 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
Create vanilla vue app from your terminal with Vue CLI. Type
vue create nasa-demo-devtoin 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
🖊️ 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
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
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
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)