like page navigation, data store, or even validation frameworks. They don’t have to be introduced all at once, they can be added step by step, as we need, and our application will grow from simple HTML pages to fully functional web applications. In this workshop, we’ll incrementally introduce and work with Vue.js and its ecosystem: Vue-Router, Vuex, Vue-Axios, REST, GraphQL and Vuelidate
We’ll start with a brief introduction to Vue.js: what it is and how it can be added to an existing website. Then we’ll take an existing landing page and add Vue.js to it so that we can make it interactive. We’ll touch a little bit on the ajax part too.
In the second part, we are going to learn about Vue.js components model, what it is, and how it was build to make components interact with each other. Once the component model is clear we’ll take the standard TodoMVC HTML template and fully transform it into a Vue.js components application.
The third part will take a podcast aggregator application and add incrementally Vue.js features to it:
Vue-router: we’ll add pages and navigate between them in the application.
Vuex: we’ll introduce Flux architecture with unidirectional data flow
REST: we’ll integrate with Axios to make backend calls and work with the responses we get
GraphQL: we’ll integrate with a GraphQL backend and make calls to it and deal with the response
For all 3 parts, we are going to store the code with Github and deploy it live using Netlify. This way all your code is safe and also available on the internet to share with others, just in case you want to. Nothing stops you to build your Vue.js applications and use the same ways to make it Live online.
This section will introduce a form validation framework and how we can use it with Vue.js.
We hope to see you in class!
Dragos & Razvan