vue-workshop

Day 1

Slides Password Playtech
Codesandbox ToDo app

Excercise 1

-----------------Ex1 - Basics ----------------------

Start by including a script on the page
install Vue Devtools
click on a top right icon in Browser panel to open example app in a new window. Then Vue extension should detect Vue on the page. If it's not, you can check "Allow access urls" options in Chrome management panel (chrome://extensions)
create new Vue instance to switch existing html to Vue present same data hardcoded in html in Vue by coppying html and using template prop of Vue instance(progressive enhancement)
move a list of todos into data on Vue instance
present a list of todos using v-for
connect todo input field to Vue instance using v-model
push and pop items from the array using Vue instance from Vue Devtools

----------------Ex2 - Events & methods ---------------------------

add submit method to add a new todo try it out in Vue Devtools connect todo input field to enter keycode for submitting todo create removeTodo method and connect it to destroy button add completed class when double clicking on todo it should switch it to input field to update. For that change class to 'editing' and conditionally display input field. update should be submitted when hitting Enter

--------------Ex3 - computed ----------------------

connect "items left" field to Vue instance to display relevant data
when clicking on completed todo checkbox - todo should be toggled as completed

-------------- Bonus --------------

Implement All, Active and Completed filters clicking on filters should display either all items, completed or active. disable submit button whenever there is no todo item add 'enter' submittion rule switch completed todo to strikethrough

Excercise1 Solved

Excercise 2

create a new folder for your project npm init yarn add --dev webpack webpack-cli vue
create folder structure

/src
- /components
- /pages
- index.js
- App.vue

add the following code to index.js

import Vue from 'vue'
import App from './App.vue'
new Vue({
  el: '#app',
  render: h => h(App)
})

create really basic App.vue template

<template>
  <div>
    <h1>Hello World!</h1>
  </div>
</template>

create webpack.config.dev.js to root folder

'use strict'
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

install style and css loaders yarn add --dev vue-loader vue-template-compiler vue-style-loader css-loader
add build script to package.json "build": "webpack --config build/webpack.config.dev.js"
add index.html file from previous project
add <script src="dist/main.js" type="text/javascript"></script>

Add hot reload

add dev server

yarn add --dev webpack-dev-server html-webpack-plugin

add dev script to package.json

"dev": "webpack-dev-server --config webpack.config.dev.js"

add it to plugins array in webpack.config.dev.js

new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  inject: true
})

remove dist script reference
install style loaders: yarn add --dev css-loader vue-style-loader mini-css-extract-plugin
add mini-css-extract-plugin to plugins dir

const MiniCssExtractPlugin  = require('mini-css-extract-plugin')

//...

plugins: [
  new MiniCssExtractPlugin({
    filename: 'main.css'
  })
]

add babel to support older browsers

yarn add --dev @babel/core babel-loader @babel/preset-env

add loader

{
  test: /\.js$/,
  use: 'babel-loader'
}

add .babelrc

{
  "presets": [
    ["@babel/env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }]
  ]
}

static files yarn add --dev copy-webpack-plugin

const CopyWebpackPlugin = require('copy-webpack-plugin')
//..
const path = require('path')
function resolve (dir) {
  return path.join(__dirname, '..', dir)
}
plugins: [
  new CopyWebpackPlugin([{
    from: resolve('static/img'),
    to: resolve('dist/static/img'),
    toType: 'dir'
  }])
]

Excercise 3

switch to Vue CLI

Excercise3 Solved

Excercise 4

Create a new project using vue-cli without vue-router or VueX
Create /views directory and inside Home and Blog component
Create BaseLayout component that will have header, footer and content slot and register it globally.
Create DummyNavigator component
- navigator will get routes object prop
- when routeChange event triggered navigator will switch displayed component based on provided prop
- navigator will use history api to change browser url

Excercise 4 Solution

Day 2

Vue router slides Password Playtech
VueX slides Password Playtech

Excercise 5

Add vue-router to our previous exercise project
Switch Navigator component we've created to be a Vue Router
Add Navigation bar with Nav links using named routes
Add custom active class to Nav link
Create store/store.js file that will have a post dictionary, getter, and setter. (post should also contain userId and isPublic flag)
On the Blog page, display a list of blog posts titles fetched from dummy API and stored in store.js post dictionary.
When clicking on a blog post navigate to Post page with the full post text.
Create 404 route and catch all unmatched routes there
Create UserProfile protected page and redirect to Login page when trying to access

Excercise 6

Convert todo app to VueX

Excercise 7

Create VueX store with user module and posts module
Load posts into a store on initial app load
Change posts access to be getters from the store
Integrate login flow with VueX user module
Add login button to redirect to the Login page or present user name when the user is logged in
When filling the login form, log in to dummy API, store user in store and redirect to UserProfile page.
create add comments functionality to an app (if not logged in, it should be a guest, if logged in, should write user name near the comment)

Day 3

Slides Password Playtech

Final solutions in the repo. I've created solutions folder - please submit your solutions there as PRs

vnovick/vue-workshop