by Dmytro Golysh
What will we do today? 🗓
What it a Vue? 👀
What it a Vue? 👀
Boilerplates - @vue/cli 🛠️
Boilerplates - @vue/cli 🛠️
Architecture 🧐
Entry point
Architecture 🧐
How does component look like? 🧐
Architecture 🧐
Directives
Better for low-level Dom operations
Architecture 🧐
Mixins
Architecture 🧐
Filters
Apply text formatting
Can be local (for one component) or global for the whole app
Architecture 🧐
Plugins
Architecture 🧐
Other
And of course, you can you es6/typescript classes to split functionality into different services
Syntax 🧐
Syntax 🧐
Syntax 🧐
Syntax 🧐
Syntax 🧐
Syntax 🧐
Syntax 🧐
Syntax 🧐
Syntax 🧐
Syntax 🧐
Rendering 🌆
Rendering 🌆
Render function
JSX
Rendering 🌆
Render function
All Vue templates compiles into render function
Example
Forms
State management
And will emit change
Where child will use props to get input data
State management
A child needs to do
State management
Routing
Routing
Routing
Lazy-loaded
Routing
Routing
Routing
Auth example
Routing
Auth example
Testing
Jest
Testing
Jest
Testing
Jest
Testing
Snapshot Testing
Testing
http
No default HTTP client
Axios
Pros / Cons
Additional features
Additional features
Bonus +