genkio / vue-better-practices

Show cases better practices of developing Vue.js apps

vue-better-practices

This project show cases some of the better practices I accumulated when developing Vue.js apps

Live Demo

https://vue-better-practices.firebaseapp.com/

Tech Stacks

• Front-end UI built with Vue.js, Vue Router, Vuex and Bulma.css
• Back-end API built with Express.js and Firebase powered by Google Cloud Functions

App Features

• Responsive UI
• Categorized shop items list view
• Navigation between list and detail view
• Client side search

UI Component Hierarchy

Timeline

ItemDetail

Development

# Use Node.js version 8+ for local development
# nvm use 8.x.x

# install client dependencies
npm install

# install api dependencies and serve api
cd functions && npm install && npm run serve && cd ..

# create dotenv config and add your locally served api url to it
cp ./.env.example ./.env

# serve ui with hot reload at localhost:1234
npm run dev

Deploy

# deploy database rules
npm run deploy:db

# deploy api to cloud function
npm run deploy:api

# deploy to firebase hosting
npm run deploy:ui

TODO

• Replace scoped css with css module
• Implement like feature