Section 1
- 1.1 Getting Setup
- 1.2 Creating the TopNav component
- 1.3 Using the Composition API
- 1.4 Adding Bulma
- 1.5 Rendering the Timeline component and Tabs with Vue Router
- 1.6 Creating reactive tabs with `ref`
- 1.7 Intro to Vue Test Utils - Testing the Timeline component
- 1.8 Improving the test with data attributes and await nextTick
Section 2
- 2.0 Typesafe Vuex with `vuex-smart-module`
- 2.1 Creating the Posts Store
- 2.2 Testing the Posts Mutation
- 2.3 Writing a Type Safe Action
- 2.4 Consuming a Vuex store with the Composition API
- 2.5 Calling an Action and Access the Posts with `computed`
- 2.6 `ref` vs `computed`
- 2.7 Accessing Vuex State using Getters
- 2.8 Mocking a Vuex store using `jest.mock`
Section 3
- 3.0 Improving the Timeline with a TimelineItem component
- 3.1 Extracting a TimelineItem component and using Props
- 3.2 Improving the TimelineItem with RouterLink
- 3.3 Adding a createTestVue method to avoid polluting the global Vue
- 3.4 Using `emitted` to test events
- 3.5 Using Portals to render a modal, testing with exists
- 3.6 Improve the Modal UI
- 3.7 Section Summary
Section 4
- 4.0 Section Preview
- 4.1 Adding a `/posts/edit` route
- 4.2 Using v-model and Creating the Layout for the PostWriter
- 4.3 Implementing Two way binding manually on contenteditable
- 4.4 Introducing `marked` to convert the markdown to HTML
- 4.5 Adding a test for the markdown functionality
- 4.6 Adding syntax highlighting with highlight.js
- 4.7 Dispatching an Action to Insert the New Post into the Posts state
- 4.8 Emitting a submitted event and dispatching a create action
- 4.9 Using `mocks` to fake a router and fixing the SET_POSTS mutation
Section 5
- 5.0 Users Sign Up, Log in and Validation
- 5.1 Defining the User interface
- 5.2 Creating new NewUser route implementing v-model on a Custom Component
- 5.3 Defining the Rule type and test driving the validator.ts
- 5.4 Integration the Validation with the ValidatorInput
- 5.5 Completing the Signup Component
- 5.6 Building the Users Store
- 5.7 Programmticaly show/hide Nav buttons based on User State
- 5.8 Login/Logout
Section 6
- 6.0 Finishing the App with Post Show page, Editing an Existing Post, Various Other Improvements
- 6.1 Adding a Show Posts page
- 6.2 Displaying the Post Content
- 6.3 Creating an isCurrentUser getter to programatically show the edit button
- 6.4 Allowing Posts to be Edited
- 6.5 Filtering the Posts based on Publication Date
- 6.6 Show a Sign Up Form in the Modal
- 6.7 Conclusion, Improvements
Conclusion
- Review of content, how to continue improving as a Vue.js developer and front-end engineer