Vue Masterclass (Covers Vue 2 and 3)

In this lesson, we use the Create Vue NPM utility to scaffold a Vue 3 application powered by Vite. We configure the app to include Vitest, ESLint, and Prettier. Finally, we learn how to start the development server and load the Vue app in our browser.

In this lesson, we configure the settings.json file in VSCode that holds our project settings. The complete file is available in the previous lesson. Double-check that its content matches your file's content.

In this lesson, we upgrade our project's ESLint configuration file to enable the stricter recommended settings.

In this lesson, we make changes in our code editor to observe hot reloading, a feature in which Vite detects our file changes and updates the browser content immediately.

In this lesson, we review the files, folders, and project structure generated by Create Vue CLI.

In this lesson, we discuss how to bootstrap the Vue application in the main.js file. The app identifies an HTML element on the page to "hook into" and launch itself from.

In this lesson, we learn about the @ shortcut for the src directory in our project. We also practice using it in main.js.

In this lesson, we introduce the 3 sections of a Vue component file:the template section for HTML, the script section for JavaScript, and the style section for CSS.

In this lesson, we delete several starter files that Create Vue generated in order to prep for the next section of the course.

In this lesson, we render multiple instances of the same HelloWorld component to understand the benefits of component reusability in Vue.

In this lesson, we install the Vue Dev Tools, a Chrome extension for debugging Vue applications. We then test out the extension with our job search application.

In this lesson, we review everything we've learned in this course section.

Download the project code as it stands at the end of section 2. This can be helpful if you'd like to pick up the course at a specific section.

In this lesson, we discuss how CSS in a component's style section can "leak out" and affect other components.

In this lesson, we limit the scope of a component's styles to its own <template> elements by adding the scoped attribute in the <style> tag.

In this lesson, we clean up our job search codebase and delete some files in preparation for next course section.

In this lesson, we review everything we've learned in this course section.

Download the project code as it stands at the end of section 3. This can be helpful if you'd like to pick up the course at a specific section.

Learn about the Tailwind CSS library which includes thousands of CSS utility classes. Each class adds a single CSS attribute/property declaration. We combine multiple classes together to form the complete user interface.

In this lesson, we add TailwindCSS to our Vite/Vue project. We configure the tailwind.config.js file and configure our index.css file to incorporate Tailwind directives.

Review the ES6 spread syntax for arrays, which copies all elements from an original array into a new one.

In this lesson, we add the Open Sans font to our project from Google Fonts. We also configure Tailwind to preserve its default styles in case our new font fails to load.

In this lesson, we practice using Tailwind in a Vue component by applying styles for margin, font size, and text alignment.

In this lesson, we install a helpful VSCode extension to enable Tailwind CSS Intellisense, which shows helpful pop-up suggestions as we type our classes.

In this lesson, we install a Prettier plugin to sort our Tailwind classes in a consistent order.

Review everything we learned in this section about TailwindCSS, utility classes, setup and more.

Download the project code as it stands at the end of section 4. This can be helpful if you'd like to pick up the course at a specific section.

In this lesson, we'll introduce our next user story. We'll be building a main nav to enable the user to navigate between the pages of our site.

In this lesson, we create a new MainNav component in a new vue file.

In this lesson, we render our MainNav as a child component within our App component. We also discuss the components property of the configuration object, where we register imported components so we can use them in the <template> section.

In this lesson, we discuss the different syntactical options to render a child component including <kebab-case> and <PascalCase>. We also introduce self-closing component tags versus opening + closing component tags.

In this lesson, we update tailwind.config.js to add 3 custom colors to our app. Tailwind will auto-generate CSS classes (for things like font and background) using our new colors.

In this lesson, we style our MainNav component using TailwindCSS.

In this lesson, we review the basics of JavaScript objects including properties, methods, and the this keyword, which allows us to reference the current object.

In this lesson, we introduce component data. Data is state that changes over time. We can use our data in our <template> with the use of double curly braces {{ and }}.

In this lesson, we practice the interpolation syntax (curly braces) that we introduced in the previous lesson and add more properties to our MainNav component's data.

In this lesson, we review the concepts we covered in the previous section of the course including component data, Tailwind custom colors, and more.

Download the project code as it stands at the end of section 5. This can be helpful if you'd like to pick up the course at a specific section.

In this lesson, we introduce the benefits of testing and the libraries we'll be using: Vitest and Vue Testing Library.

In this lesson, we'll fix a quick issue due to differences in the latest version of Create Vue.

In this lesson, we create our first Vitest file and write a basic test using the describe, it, and expect functions.

In this lesson, we practice declaring multiple describe blocks in a Vitest test file.

In this lesson, we introduce test-driven development (TDD) and the benefits it gives us. TDD means we write our tests first, before the implementation code.

In this lesson, we demonstrate TDD with a simple mathematical example.

In this lesson, we add the --coverage flag to our test:unit command to ask Vitest to run a code coverage check when it runs our tests.

In this lesson, we enable our Vitest functions (like describe and it) to be available automatically in our test files.

In this lesson, we delete our sample playground.test.js file, as it was just for example.

Review everything we learned in this course section including Vitest syntax, test-driven development, configuring Vitest global functions, and more.

Download the project code as it stands at the end of section 6. This can be helpful if you'd like to pick up the course at a specific section.

In this lesson, we clean up the App.vue component to prepare for the tests we'll be writing in the upcoming lessons.

In this lesson, we install the Vue Testing Library and some complementary libraries. We also create a setup file that adds new matchers to our Vitest assertions.

In this lesson, we use the render function to render our Vue component to a virtual DOM. We also introduce the screen object and the debug method to show the HTML markup.

In this lesson, we use the toBeInTheDocument assertion to validate the presence of a piece of text in our MainNav component tests.

In this lesson, we introduce the second argument to the render function and discuss the tradeoffs of customizing the component's data in our test suite.

Review everything we learned in this section of the course including installing and setting up Vue Testing Library, rendering a component, and checking for the presence of text with the toBeInTheDocument matcher.

Download the project code as it stands at the end of section 7. This can be helpful if you'd like to pick up the course at a specific section.

In this lesson, we introduce our first Vue directive, v-bind. The v-bind directive allows us to connect a piece of component data to an HTML element attribute.

In this lesson, we introduce the : shortcut syntax for the v-bind directive.

In this lesson, we style the navigation menu in our MainNav component using TailwindCSS.

In this lesson, we introduce the v-for directive, which repeats a chunk of HTML for every element in an iterable (such as an array).

In this lesson, we discuss the importance of adding a key attribute to our v-for iterations. Each value of the key attribute must be unique.

In this lesson, we introduce the first prefix in Tailwind to apply styles to only the first child in a collection.

In this lesson, we review the ES6 map method on array. The map method returns a new array by performing a consistent operation on each element from the original array.

In this lesson, we introduce accessibility and the concept of ARIA roles, which are "responsibility labels" that the browser assigns to our elements.

In this lesson, we write a test for the menu items in our MainNav component and introduce the getAllByRole method.

In this lesson, we install the Testing Playground browser extension, which helps generate and recommend queries for our component tests.

In this lesson, we review everything we learned in this section including the v-bind and v-for directives, the Testing Playground extension, ARIA roles + accessibility, and more.

Download the project code as it stands at the end of section 8. This can be helpful if you'd like to pick up the course at a specific section.

In this lesson, we introduce our next user story: simulating a user logging into our job search app.

In this lesson, we create a new ActionButton component and render it within MainNav.

In this lesson, we add initial styles to our ActionButton component.

In this lesson, we modify our tailwind.config.js file to generate new CSS classes for a custom box shadow.

In this lesson, we create a new ProfileImage Vue component to store our user profile picture.

In this lesson, we introduce the v-if directive to conditionally render a chunk of HTML within our component template.

In this lesson, we introduce the complementary v-else directive, which renders a chunk of HTML when the v-if directive evaluates to false.

In this lesson, we learn how to add methods to our Vue component by using the configuration object in the Options API.

In this lesson, we introduce the v-on directive, which allows us to react to an event like a user click or user type.

In this lesson, we show the @ shortcut for the v-on directive.  This is the preference of our ESLint configuration.

In this lesson, we discuss the Event object that the browser generates for us when an event occurs. The object contains metadata about the event that transpired.

In this lesson, we learn how to use the this keyword to access and overwrite component data within a method.

In this lesson, we learn about the queryBy family of methods in Vue Testing Library, which return null when they are unable to find the given query.

In this lesson, we introduce the @testing-library/user-event library, which we use to simulate user interactions with our components.

In this lesson, review everything we learned in this course section including the v-if and v-else directives, querying with the queryBy family of method, using userEvent to interact with components in tests, and more!

Download the project code as it stands at the end of section 9. This can be helpful if you'd like to pick up the course at a specific section.

Welcome to the next section of the course! In this lesson, we introduce our next user story: multiple buttons to communicate primary and secondary actions on our view.

Download the project code as it stands at the end of section 10. This can be helpful if you'd like to pick up the course at a specific section.