Skip to content

Latest commit

 

History

History
88 lines (51 loc) · 1.55 KB

README.md

File metadata and controls

88 lines (51 loc) · 1.55 KB

Setup

To follow demo step by step: You can run each script in vue-demo-scripts individually to follow progression.

  • To go to step 4, re-run all scripts from 0 to 4
./vue-demo-scripts/0_vuejs_setup.sh
./vue-demo-scripts/1_...
./vue-demo-scripts/2_...
  • To get the complete version:
./build_demo.sh

Answers to give

Alt text


Steps

Script 0

Setup the core structure

  • tsconfig
  • external library (Vuetify, icons)
  • Set custom Themes (Light & Dark)
  • Set default layout (Navbar, Sidebar, Footer, Main Content)
  • Install dependencies

Script 1

  • Add an exemple of how works binding between HTML templates & JS Data

Script 2

  • Factorize the previous exemple as a reusable component

Script 3

  • Define a more generic component to draw Cards with props & default slots

Script 4

  • Improve previous component to use named slots

Script 5

  • Use previous component to create a more complex design

Script 6

  • Create a component to show how works reactivity

Script 7

  • Implement basics of Vue Router functionnalities
    • Define routes & views
    • Move to another page (statically & dynamicaly)
    • Read URL Path, Query params
    • Basic middleware to manage page routing

Script 8

  • Implement nested routing with childs

Script 9

  • Implement store exemple with SnackBar component

Script 9.1

  • Implement API Configuration, Calls, Interceptor request/response

Script 9.2

Composition API with VueUse

Script 9.3

Define your own Composables (Api, Stores, Api Wrapper)