This document provides an overview and introduction to getting started with the Vue.js framework. It discusses why one might choose Vue over other frameworks, the key components of Vue like Vue, Vue-Router, and Vuex. It also covers the basics of Vue including component-driven architecture, templates, props, events, and routing. The document concludes with challenges and examples to help get users up and running with Vue today.

1. Up and Running Quickly With
Burton Smith
burton@breakstuff.io
@stuffbreaker
https://github.com/break-stuff/i-love-the-office

2. A Bit About Me…

3. A Bit More About Me…

4. Shameless Plug
https://projectclarion.com

5. How the world was…

6. Then in 2006…

7. Now…

8. So what are our options…?
VSVS

9. How do you choose?
Highly
Flexible
Highly
Opinionated

10. Other Players

11. Why Not Vue.js?
• Not as popular
• Other frameworks are backed by big companies
• Vue-specific code (directives, etc.)
• Lack of native/mobile app support

12. So why choose Vue.js?

13. It’s Crazy fast!
• Utilizes the virtual DOM
• Its Reactive
• Templating syntax
• It’s tiny! <20KB (v3 is <10KB)
• Vue v3 is even faster than Svelte!!!

14. Progressive Framework
An incrementally adoptable ecosystem that scales between a library
and a full-featured framework.

15. Key Framework Components
Vue
Core
Vue-
Router
Vuex

16. Component-Driven Architecture
• Clean markup
• UI Consistency
• Code reuse

17. Very Small Learning Curve
• Intuitive Framework
• Great Documentation
• An Amazing Community

18. Additional Frameworks
VuePress Gridsome

19. Mobile Frameworks
NativeScript

20. UI Frameworks
Vuetify
Bootstrap-Vue
Kendo UI
Semantic UI

21. Some References to Get You Started
• Vue.js Tutorials
• https://vuejs.org/
• https://vuejsdevelopers.com/
• https://alligator.io/vuejs/
• Scotch.io tutorials
• http://blog.rangle.io/tag/vue/
• Free video tutorials by Maximilian Schwarzmüller

22. If in need…
Search “AWESOME VUE”
https://github.com/vuejs/awesome-vue

23. My Goal…

24. My Actual Goal…
Get you up and running with Vue.js TODAY!

25. What we will not be covering…
• Vue.js v3 – Specifically Composition API
• Vuex (kind of)

26. Questions???

27. Let’s Get Started!!!
• Download https://github.com/break-stuff/i-love-the-office/
• Once you have it downloaded, open a command prompt at the root
of the project and run npm install to install the project dependencies
• To run the project run npm run serve
• https://codesandbox.io/s/github/break-stuff/i-love-the-office/
• (Not Currently Working)

28. Dev Tools (optional)
• For VS Code – Vetur
• Install the browser extension (for Chrome and Firefox)

29. Getting Started
• There are 2-and-a-half-ish ways to get started with Vue.js

30. Do a sweet demo…

31. Project Demo
https://break-stuff.github.io/i-love-the-office/

32. Challenge 1
• Pull in the quote data and render it on the page.

33. Loops

34. Binding

35. Challenge 2
• Toggle the isFavorite property on the quote object and change the
button style based on its value.

36. Conditional rendering

37. Events

38. Events: Part 2

39. Challenge 3
• Add drop-down to filter quotes by character. If no user is selected,
show all quotes.

40. Challenge 4
• Creating your first component

41. Component Architecture

42. Component Registration - Globally

43. Component Registration - Locally

44. Slots

45. Props

46. Challenge 5
• Move Quote-specific logic and markup to its own component

47. Advanced Props

48. Challenge 6
• Fix broken like functionality

49. Custom Events

50. Challenge 7
• Form input bindings
• Event Emitting

51. Challenge 8
• Add new Pages and Routing

52. Vue-Router

53. Dynamic Route Matching

54. Programmatically Change Routes

55. Route Guards

56. Vuex
• What is Vuex?
Page A
1 2 3
Page B
1 2 3
Page C
1 2 3

57. Vuex
Page A Page B Page C
Vuex
Data 1 Data 2 Data 3

58. How Does it Work?

59. Should You use Vuex?

60. Questions???

61. Thank You!!!
Go forth and code!