An OMDb demo powered by Vue CLI 3.x

The README generated by Vue CLI was moved to README-CLI.md

§ Online demo

Click here.

§ Features

Basics: Vue + Vuex + Vue Router + Axios
UI lib: Bulma + Font Awesome 5, Fully Responsive & Mobile First!
Eliminate unused styles by PurgeCSS
Auto polyfill (browser compatibility list) powered by Polyfill.io
Save query parameters in the URL (inspired by LinkedIn Jobs)

$ Quick Start

$ git clone https://github.com/kenberkeley/omdb-vue.git
$ cd omdb-vue/

# Install dependencies
$ npm i

# Run!
$ npm run serve

Then open http://localhost:8080

$ Project Structure

Only src/ will be elaborated below

src/
├── assets/
├── components/
├── constants/ # All global scope keys (e.g. URL query params, storage) should go here to avoid name collisions
├── pages/
│   └── index/
│       ├── comps/ # Used by index page only
│       └── index.vue
├── router/
├── store/
├── utils/
├── App.vue
└── main.js

Reference:

§ Deployment

# Compile for production
$ npm run build
# npm run build -- --report # generate report.html to analyze bundle content

# Publish to Github Pages (https://bit.ly/2YeUyzG)
$ npm run deploy

Check out Deployment (Vue CLI Doc) for more information.

§ TODO

Testings (Unit & E2E)
OMDb API request limit (temporary solution: replace VUE_APP_OMDB_API_KEY in .env with the new one)