VueJs Workshop

VueJS Workshop By Digvijay & Anish

Let’s start with stats Created by Evan You Github 188 Contributors | 109K Stars vue 352,868 /week vue-cli 28,242 /week Since Feb 2014FEB 2014 Current Version 2.5.16

Benefits of Vue ● Easiest learning curve. ● Great documentation. ● Active development community. ● Progressive yet Scalability. ● Separation of concerns (JS / HTML / CSS) | Clean code ● Lightweight framework (23k gzip)

Ecosystem vue-router Single-page application routing vuex Large-scale state management vue-cli Project scaffolding vue-loader Single File Component (*.vue file) loader for webpack vue-server-renderer Server-side rendering support vue-class-component TypeScript decorator for a class-based API vue-rx RxJS integration vue-devtools Browser DevTools extension

War of the frameworks ● Components ● Type Checking (with Typescript) ● Templates - JSX or HTML ● State management and data binding ● Size (gzip file) - 143k Angular, 43k React, 23k Vue ● Testing.

Extras ● JSX - If you really really want it. ● Redux can be used - vue-redux ● Redux sagas - vuex-saga ● vue-migration-helper ● https://github.com/vuejs/awesome-vue

Vue CLI npm install -g vue-cli vue init <template> <project_name> Or vue create <project_name> vue ui

Getting started git clone --depth 1 https://github.com/unfoldui/vue_workshop -b step-0 npm run serve cd vue_workshop rm -rf .git git init npm install

Basic single page component 1. SCRIPT: Component Logic

Basic single page component 2. TEMPLATE: View

Basic single page component 2. STYLE: Css or css preprocessors

Vue cli makes it easy to add loaders npm install --save-dev node-sass sass-loader <style lang=”scss”>...</style> require(‘./path-to/app.scss’)

Props & v-bind Using the component and passing props You can pass dynamic data using v-bind

Conditional rendering Using v-if directive to render DOM conditionally Special class binding method to bind various classes

Let’s get coding ● Build a Movie Card component ● Make it display mockMovie ● Should show a badge for “tomato recommends” if the movie has a Rotten Tomatoes score of > 85%

Using the API npm run mockServer GET http://localhost:3000/movies GET http://localhost:3000/movies/:id

Let’s get coding ● Fetch all movies from the API server ● List all movies in a list, or better, a grid fashion

Routing with vue-router: Installation npm install --save vue-router

Routing with vue-router: Plugging it in

Emitting and catching events from components Emitting in child using this.$emit method Catching and handling the event

Miscellaneous Let’s not forget, programmatic routing Event modifiers

Let’s get coding ● Refactor your app so that it supports two pages - home and movie details ● Use vue-router to route between the two ● Clicking on a movie card on home page should route to details ● Provide a back button on details page

THANK YOU Digvijay Anil Gunjal App Developer, ThoughtWorks digvijag@thoughtworks.com github.com/digvijay19 @digvijaygunjal Anish George UI Developer, ThoughtWorks anishgeo@thoughtworks.com github.com/bassoGeorge @ageorgedev

VueJs Workshop

More Related Content

What's hot

Similar to VueJs Workshop

More from Unfold UI

Recently uploaded

VueJs Workshop

Editor's Notes