Rocket Downrange: WebSite built on Vue.js, Axios, Bootstrap 4 and Netlify

Rocket Downrange is a site I am developing to showcase the advancements of humanity in regards to the exploration of outer space. While the core Vue.JS is my own writing (please be patient as I continue to learn), all data you see on the site is returned from various API’s. The first three API’s I am using belong to SpaceX (USA), Rocket Lab (USA) and NASA (USA) and are provided for free or free with a registered key. Thus, the site should continue to be a fun and dynamic way of keeping updated on the industry at large.

I hope the site serves you well and I am always open to critique/criticism,

-Cav

All mission data belongs to corresponding company. Most of the images are not mine, sourced from Adobe Creative Cloud and other free graphics sites

Hosted on Netlify, built with Vue.js, Axios, Bootstrap 4 and more!

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

Developer Notes:

Remove the url # issue - simple fix is to add mode:history to the Vue Router.

// router/index.js

const router = new VueRouter({
	routes, mode: 'history'
});

Added Vue-Meta for SEO enhancements/meta tags. Purely experimental :) Vue Meta article

npm install vue-meta
// main.js file

import Meta from 'vue-meta';

Vue.use(Meta);

URLs were not working properly. So for example, rocketdownrange.com/spacex was returning a 404. Solved this by adding netlify.toml file and slight alteration to routes.

// netlify.toml

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
  force = false

Download Details:

Author: TheKicker

Live Demo: https://rocketdownrange.com/

GitHub: https://github.com/TheKicker/rocket-downrange

#vuejs #vue #javascript #vue-js