Vue JS 3: The Composition API (Inc Script Setup, TypeScript)

Set up a simple node.js server with Express and TypeScript to serve mock posts at /posts, including today, this week, and this month, using CORS and port 8000.

Fetch posts from a local server using fetch, update the post store with IDs and a post map, and simulate latency. The lesson previews Vue 3 suspense for loading.

Learn to use Vue 3 suspense to manage loading states for asynchronous data with a wait, wrapping components, and default and fallback slots.

Explore vue router to transform a single-page app into a multi-page experience, routing posts without reloads, and build a real-time markdown editor with inline and block syntax highlighting.

Install Vue Router 4.0.15, create and configure a router with create router and create web history, define routes and a home view, and apply it to the app.

Create a reusable post writer component in Vue 3 using the composition API and TypeScript, supporting create and edit post flows via a post prop and the defined props macro.

Set up two-way binding for a post title using ref and the v-model directive, showing how input events update the bound ref in real time and explaining the model concept.

Use Vue 3 composition API to build a two-way binding post writer with a left content editable editor and a right live markdown-to-html preview.

Install and use Marked to turn markdown input into HTML in real time, render with v-html, and manage two-way binding using watch and watchEffect.

Improve performance for large posts by debouncing input, delaying markdown-to-html parsing and syntax highlighting until the user stops typing. Use Lodash debounce with a 200-millisecond delay to update the preview.

Add a submit button and a handle click to persist a new timeline post to the post store with title, markdown, and HTML.

Implement a Node.js post endpoint under /posts using body parser for JSON, simulate a database with an array, create a new post with generated id, and return it.

Learn how Vue 3's teleport renders modal content using the to prop, enabling sign-up forms to appear above the page, with a reusable modal composable.

Build a framework-agnostic length validator in Vue 3 by creating a code length rule with min and max, enforcing the Rule API, testing, and improving type safety.

Link the validation framework with the sign up form in a Vue 3 Composition API setup, exporting the status interface and using required and length rules to display errors.

Add a submit button and use an event modifier to prevent default, then validate a new user form and prepare a user store to post data to a backend API.

Define a Vue 3 users store using the composition API to post new users to the backend, wire it into the signup form, and handle async create user operations.

Implement a node.js post endpoint to create new users in an in-memory database, assign IDs, exclude passwords from responses, and prepare for authentication and authorization in the next module.

Learn to implement jwt authentication by signing tokens and storing them in http only cookies in a vue.js app, then verify them with a debugging tool.

Implement dynamic components in a Vue 3 composition API workflow to switch between sign up and sign in forms within a modal, using shallow ref for performance.

Implement the login endpoint on the server, validating the username and password against the user database, authenticate on success, and return 401 on failure.

Finish the authentication module by examining security, CSRF risk, and JSON web tokens weaknesses, and practice UX improvements with sign in vs sign up errors, loading states, and simulated production latency.

Finish the app with edit and show post pages, explain authorization versus authentication, and note only original authors can edit posts; then cover production deployment and Vue.js development basics.

Guard the new post route with Vue Router navigation guards, redirect unauthenticated users to the home page via a beforeEnter hook, and manage logout redirects.

Show posts page demonstrates creating a dynamic post route with id parameter, retrieving the post from the post store, and rendering it with routing and navigation.

Show or hide the edit button with a computed property linked to the user store, requiring the current user id to match the post author id for authentication and authorization.

Refactor the post flow by emitting a submit event with the new post payload via defineEmits, then handle it in the parent and update edits to use a put request.

Implement a put endpoint to update a post by finding its index via the request id, updating it, and returning the newly updated post; authentication is left as an exercise.

Deploy a production build of Vue.js 3 app with npm run build, serve static assets from dist using nginx on a DigitalOcean droplet, and proxy API calls.

Learn to mount a Vue form input component with Vue Test Utils, pass required props including name, model value, type, and status, and assert error rendering when valid is false.

Learn to test interactive Vue 3 components using the composition API and script setup. Mount a form input with v-model and computed status, and assert error messages via async tests.

Explore configuring and testing the nav bar with Vue Test Utils, wiring Pinia and Vue Router in tests, and handling teleports, routes, and mounting options.

Test the navbar and authentication state in a Vue 3 composition api app, validating not authenticated shows sign up and sign in, authenticated shows new post and log out.

Refactor vitest tests by using global variables, a fresh store and router before each test, and stubbing browser APIs to enable interactive test scenarios.

Master testing teleport in vue by rendering the sign-in modal in a component test, validating the modal content via document body, and distinguishing component tests from end-to-end tests.

Learn to test a Vue 3 user form component end-to-end, validating required fields, length constraints, and error messages, then assert the submit event emits the correct payload.

Learn how to test the post writing component in Vue 3 using the composition API and TypeScript, covering async tests and inline snapshots, props, contenteditable input, and debounced markdown rendering.

Explore component testing with Vue test utils and V test, boost type safety with TSX and type definitions, and compare TSX with Vue syntax, plus end-to-end testing ideas.