Companies Home Search Profile

In-Depth Vue 3 For Beginners (Inc. Composition API, Router)

Focused View

Chris Dixon

11:05:41

85 View
  • 01.01-introduction.mp4
    01:55
  • 01.02-what you will need for this course.mp4
    00:44
  • 01.03-what is vue.js and what can it do.mp4
    02:50
  • 01.04-overview of vue 3 changes.mp4
    04:56
  • 01.05-project source code.mp4
    01:50
  • 02.01-section introduction.mp4
    00:36
  • 02.02-the vue instance.mp4
    05:58
  • 02.03-data and lists.mp4
    06:19
  • 02.04-looping with objects.mp4
    04:52
  • 02.05-list indexes and keys.mp4
    03:55
  • 02.06-binding attributes.mp4
    06:58
  • 02.07-mini challenge-dynamic links.mp4
    01:41
  • 02.08-mini challenge-dynamic links-solution.mp4
    02:35
  • 02.09-javascript expressions.mp4
    04:07
  • 02.10-event handling.mp4
    04:17
  • 02.11-methods.mp4
    02:13
  • 02.12-raw html.mp4
    02:08
  • 02.13-the vue life cycle.mp4
    09:44
  • 03.01-section introduction.mp4
    00:27
  • 03.02-what are components.mp4
    02:18
  • 03.03-first look at components.mp4
    04:19
  • 03.04-props and reusing components.mp4
    04:50
  • 03.05-local components.mp4
    05:09
  • 04.01-section introduction.mp4
    00:34
  • 04.02-single-page applications.mp4
    03:10
  • 04.03-the vue cli.mp4
    06:21
  • 04.04-project structure.mp4
    08:10
  • 04.05-the vetur extension.mp4
    01:08
  • 05.01-section introduction.mp4
    00:31
  • 05.02-starter project download.mp4
    03:32
  • 05.03-single file components.mp4
    10:18
  • 05.04-making our components dynamic.mp4
    05:19
  • 05.05-calculating days left.mp4
    06:40
  • 05.06-conditional rendering.mp4
    07:56
  • 05.07-more on conditional rendering.mp4
    04:07
  • 05.08-computed properties.mp4
    09:04
  • 05.09-watchers.mp4
    08:21
  • 05.10-computed or watchers.mp4
    02:54
  • 05.11-ordering and toggling past events.mp4
    06:57
  • 05.12-teleport.mp4
    06:22
  • 06.01-section introduction.mp4
    00:28
  • 06.02-our form component.mp4
    06:24
  • 06.03-styling and positioning the form modal.mp4
    07:13
  • 06.04-emit custom events.mp4
    05:44
  • 06.05-binding form inputs.mp4
    03:57
  • 06.06-emit data with a custom event.mp4
    06:52
  • 06.07-emit multiple events.mp4
    01:17
  • 06.08-modifiers.mp4
    02:07
  • 06.09-validating our form.mp4
    06:07
  • 06.10-updating events.mp4
    11:34
  • 06.11-removing events.mp4
    09:34
  • 07.01-section introduction.mp4
    00:27
  • 07.02-prop validation.mp4
    08:56
  • 07.03-non-prop attributes.mp4
    08:53
  • 07.04-more on non-prop attributes.mp4
    06:09
  • 08.01-section introduction.mp4
    00:31
  • 08.02-what we will be building.mp4
    02:43
  • 08.03-project pages and components.mp4
    05:15
  • 08.04-introduction to slots.mp4
    02:04
  • 08.05-overview page structure.mp4
    05:51
  • 08.06-slots in practice.mp4
    07:10
  • 08.07-passing dynamic data and scope.mp4
    04:18
  • 08.08-fallback content.mp4
    01:45
  • 08.09-named slots.mp4
    05:16
  • 08.10-scoped slots.mp4
    07:37
  • 08.11-orders page.mp4
    08:18
  • 08.12-bestsellers page.mp4
    10:29
  • 08.13-dynamic components.mp4
    04:40
  • 09.01-section introduction.mp4
    00:33
  • 09.02-what is provide-inject.mp4
    02:37
  • 09.03-setting up a provider.mp4
    03:27
  • 09.04-injecting data.mp4
    06:53
  • 09.05-mini challenge-update orders-bestsellers pages.mp4
    00:59
  • 09.06-update orders and bestsellers pages to use provide.mp4
    03:41
  • 09.07-updating the provider from a child component.mp4
    03:34
  • 10.01-section introduction.mp4
    00:37
  • 10.02-what we will be building and project starter.mp4
    04:09
  • 10.03-setting up the vue router.mp4
    03:46
  • 10.04-router link and router view.mp4
    04:32
  • 10.05-params and queries.mp4
    05:36
  • 10.06-matching dynamic routes.mp4
    04:52
  • 10.07-nested routes.mp4
    04:56
  • 10.08-active classes.mp4
    02:40
  • 10.09-fallback pages.mp4
    04:29
  • 10.10-setting up our project components and routes.mp4
    10:01
  • 10.11-programmatic navigation.mp4
    04:17
  • 10.12-different router modes.mp4
    02:34
  • 11.01-section introduction.mp4
    00:54
  • 11.02-what is the composition api.mp4
    06:15
  • 11.03-composition setup.mp4
    08:56
  • 11.04-primitive versus reference types.mp4
    07:50
  • 11.05-quick introduction to proxies.mp4
    05:18
  • 11.06-using reactive and isreactive.mp4
    05:25
  • 11.07-adding reactivity with ref.mp4
    03:15
  • 11.08-destructuring and torefs.mp4
    02:43
  • 11.09-readonly.mp4
    02:31
  • 11.10-computed.mp4
    06:16
  • 11.11-standalone composition functions.mp4
    07:37
  • 11.12-mini challenge-moving over the cards by category.mp4
    01:05
  • 11.13-moving over the cards by category.mp4
    02:01
  • 11.14-accessing the router.mp4
    04:05
  • 11.15-watch and watcheffect.mp4
    08:21
  • 11.16-using alongside the options api.mp4
    03:52
  • 12.01-section introduction.mp4
    00:43
  • 12.02-linking to selected card and category styling.mp4
    09:34
  • 12.03-the create view.mp4
    04:04
  • 12.04-retrieving the selected card.mp4
    06:52
  • 12.05-selecting the current page.mp4
    04:32
  • 12.06-switching card pages.mp4
    05:08
  • 12.07-the card preview component.mp4
    05:30
  • 12.08-text output component.mp4
    07:15
  • 12.09-card edit component.mp4
    02:08
  • 12.10-text input component and hover menu.mp4
    05:51
  • 12.11-adding menu options.mp4
    07:13
  • 12.12-menu options continued.mp4
    04:35
  • 12.13-menu styling.mp4
    08:49
  • 12.14-updating the card.mp4
    09:04
  • 12.15-adding new sections.mp4
    07:39
  • 12.16-removing sections.mp4
    03:55
  • 12.17-rearranging the order of sections.mp4
    10:16
  • 12.18-changing the section height.mp4
    03:58
  • 12.19-additional styling.mp4
    04:52
  • 12.20-provide and inject with composition.mp4
    05:56
  • 13.01-section introduction.mp4
    00:31
  • 13.02-navigation guards.mp4
    13:59
  • 13.03-lazy loading routes.mp4
    07:35
  • 13.04-grouping routes into chunks.mp4
    01:31
  • 14.01-section introduction.mp4
    00:35
  • 14.02-image upload component.mp4
    09:47
  • 14.03-setting up cloudinary.mp4
    03:00
  • 14.04-reading file objects and previewing.mp4
    06:49
  • 14.05-uploading the image file.mp4
    05:45
  • 14.06-saving the image url to our card.mp4
    04:43
  • 14.07-repositioning the image.mp4
    03:08
  • 14.08-removing images.mp4
    02:05
  • 15.01-deployment to netlify.mp4
    09:31
  • 15.02-thank you.mp4
    00:27
  • 9781801079112 Code.zip
  • Description


    Vue is a JavaScript framework to build user interfaces and single-page applications. This course is focused on the latest version of Vue 3, its important features, and working on 4 projects to implement the skills learned.

    Personal portfolio/blog project:

    This project strips away the complexities/build tools and focuses purely on Vue.js.

    Taking a simple HTML file, we add the Vue library to not only learn the core features but also to see how easily we can add it to an existing website.

    Countdown app:

    Once you have a solid grounding, it is time for project 2. This is an event countdown app that introduces you to a more sophisticated setup using the Vue CLI.

    While building the project, you will learn so much more, including watchers, computed properties, forms, conditional rendering, and teleport, to name a few.

    Dashboard app:

    Project 3 is a dashboard application with multiple pages, making use of dynamic components.

    We will discover different ways of passing data in Vue.js, including provide/inject and the different types of slots available.

    Creative cards app:

    The last project is a card editing application. You will begin with a library of greeting cards the user can select, and then once chosen, an edit screen will allow the user to edit the text, images, and overall styling as well.

    This project will introduce the new Vue 3 Composition API, how to organize your code into reusable files, routing, lazy loading, cloud functions, image uploading, and using a database.

    By the end of this course, you will have already built 4 projects and learned all of the essential Vue skills, along with the new Vue.js 3 features and syntax.

    The code files and all related files are uploaded on the GitHub repository at https://github.com/PacktPublishing/vue-3-course

    More details


    User Reviews
    Rating
    0
    0
    0
    0
    0
    average 0
    Total votes0
    Focused display
    Category
    Chris Dixon is a self-employed web developer teaching others through training courses. Chris offers freelance web development and training workshops on various topics, including HTML, CSS, JavaScript, Vue.js, NUXT.js, WordPress (custom theme development), Mongo/Mongoose, PostgreSQL, Express, Firebase, and Supabase. Chris is also involved in building Shopify ecommerce solutions, including custom apps and theme development. Chris has vast experience in GraphQL, Keystone CMS, and many other front-end/full-stack skills. He is additionally a regular Shopify user in creating and managing online stores and editing/creating custom liquid templates.
    Packt is a publishing company founded in 2003 headquartered in Birmingham, UK, with offices in Mumbai, India. Packt primarily publishes print and electronic books and videos relating to information technology, including programming, web design, data analysis and hardware.
    • language english
    • Training sessions 137
    • duration 11:05:41
    • Release Date 2023/02/14