A sample App for Vue.js
This is a fictional sample app to demonstrate different options and architectural patterns in Vue.js-apps. It is in itself not meant to be a "best practice" app, because many different approaches are mixed in one app, which should be avoided in real apps. Some of the examples are 'artificial' and you would use that approach only in bigger apps. But for the purpose of demonstrating different ways and giving a basis for custom experiments, this shouldn't be a problem.
You will find many comments in the source and links to the official documentation. This is work in progress. Don't take everything as 'this is how it should be' but as a starting point to play around with different approaches and to form your own opinion.
- Props & Events
- Event bus
- State Management per Vuex
- Vuex modules
- Dependency injection
- Render functions
- Functional components
- Dynamic components
- Slots
- v-once
- computed properties
- Higher order components
- Scoped slots
- Functions as prop
- Layout and page components
- Base components
- Mixins
- Shared services per JS-Class
- Vue Router:
- Data fetching in beforeEnter
- Route params
- Plugins
- Filter
- Simple form
Besides Vue.js itself the following libraries are being used:
# 1. Clone the repository
git clone https://github.com/NoFrank/vue-life-planner.git vue-life-planner
# 2. Enter your newly-cloned folder
cd vue-life-planner
# 3. install dependencies
npm install
# 4. serve with hot reload at localhost:8080
npm run dev
- Complex forms
- Validation
- I18n
- Upgrade to CLI 3.0
- More Vuex
- More Router examples
- Better plugin example
- Axios