Skip to content
This repository was archived by the owner on Jun 7, 2020. It is now read-only.

thejoeejoee/sample-vuejs-app

Repository files navigation

Sample Vue.js app

Issue management app as education sample app for learning basics of npm, webpack, VueJs and Vuex. Knowledge of HTML, ES6 JS a Bootstrap 4 is required. Demo deployed on GH pages.

All steps below have own git tag, so git checkout N-... to finish the step.

01 Vue.js init

Basic configuration of webpack, dependencies in package and development via dev-server.

02 Vuex state management

Enabling vuex with first issues loaded from json fixture. First v-for in template.

03 Bootstrap integration

Using 3-rd party module with components, custom webpack loaders, props usage.

04 First custom component

First component for encapsulating issues application, first custom props definition.

05 Issue content editation

State manipulation, $refs usage, vuex mapping utilities.

06 Bonus: Persisted vuex state

Vuex plugin to keep vuex state in LocalStorage.

07 Creating new issues

First custom slot, creating issues via state actions.

08 Deleting issues

State actions, v-if usage.

09 Filtering issues

New filter component, first usage of v-model, dynamic (reactive) data via computed properties.

10 Bonus: Sortable issues

Integration of vuedraggable, issues have handle icon to drag and drop to change order.

11 Title editation

Toggling two elements based on mouse events.

Resources

Author

Josef Kolář, @thejoeejoee

About

Sample vuejs app (Trello-like issues management app).

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published