add vue school links to supplement component documentation with video…

[danielkellyio]

This PR adds Vue School links to the documentation to supplement the documentation with free training videos about components.

The lessons are up-to-date, V3 versions of component lessons currently on the v2 documentation site.

Screenshots of the placements can be seen here

Links:
Component Basics
Component Props
Component Registration
Component Slots
Single File Components

Thanks!

[skirtles-code]

Thanks for the links!

A general observation on terminology. In the documentation, we avoid using the term 'Vue instance' when talking about Vue 3. That name made sense in Vue 2, with new Vue and Vue.prototype, but in Vue 3 it doesn't fit so well. Instead we use 'application instance' or 'component instance', depending on which of the two instances we're referring to.

The first few videos in the 'Vue.js 3 Components Fundamentals' course have code a bit like this:

const app = Vue.createApp({

}).mount('#app')

It's potentially problematic using the name app for the root component instance returned by mount. The name app is more often used for the application instance returned by createApp, which is a different object. e.g.:

const app = Vue.createApp({}) // application instance
const vm = app.mount('#app') // root component instance

Throughout the docs we use this same convention of using app to refer to the application instance. As app isn't used for anything in the examples in the videos, it might be better if it wasn't included.

[skirtles-code]

It seems that there's only one free video in this course. Should the link not point directly to that video?

[danielkellyio]

@skirtles-code Thanks very much for the feedback, especially the piece on the Vue instance vs application /component instance terminology. That's very helpful!

Below are my proposed changes to address the issues you've brought up. Please let me know if I've missed anything, otherwise let me know I'm good to implement the changes.

Thanks again!

app instance vs root component instance

• Component Fundamentals (videos 1, 2) - overlay image of Vue.createApp({}) over the 1st line of code so that it doesn't show assignment to const app (can make it look like that's what it always was)

Vue instance vs application or component instance

• Intro to Vue 3 Components 0:13 - Change audio "Components are reusable Vue instances with a name" to "Components are reusable groups of markup, state, and logic with a name."
• Intro to Vue 3 Components 0:56 - Change audio "Know here that this is the same options object that we use when we define a Vue instance" to "Know here that this is the same options object that we use when we define an application instance"
• Reusable Components With Props: 5:43 - Change audio from "main Vue instance" to "application instance"
• Nested Components In Vue 00:17 - Change audio "Vue instance" to "application instance"
• Global vs Local Vue Components 00:16 - Change audio from "We've only registered components using the root Vue Instance .component method" to "We've only registered components using the application instance .component method"
• Vue Component Lifecycle Hooks 00:04 - Change audio from "Each Vue instance goes through a series of initialization steps..." to "Each component instance goes through a series of initialization steps..."

data as object no longer valid on root

• Intro to Vue 3 Components 2:11 - cut audio "as it can be in the root Vue instance"

parent is root instance

• Global vs Local Components 03:35 - Change "Since this component does not have a parent, we will define it in our root instance" to "In this case the parent is the application instance"

sfc link

• updated link to point only to the intro lesson

[skirtles-code]

@danielkellyio

I can't easily provide inline responses here but hopefully this won't be too difficult to follow. I've tried to use the same names and timestamps as in your proposed changes. I've only listed the proposals where I had something to add, the others sounded fine to me.

Vue instance vs application or component instance

• Intro to Vue 3 Components - 0:35. (new) I suggest changing 'Vue instance that mounts' to 'Vue application that mounts'.
• Intro to Vue 3 Components - 0:56. I'm not entirely sure about the proposed change. There's a common source of confusion caused by the design of the createApp call. Most people expect that when they call something like createX(options), the options are options for X. However, that isn't what happens for createApp. In that case the options are the root component. Configuring things like provide, components, etc. on the application instance is done via method calls, not via the options object. The docs page for this tries to make this distinction explicit. The problem is compounded by the convention (inherited from Vue 2) of calling the root component App. I think 'this is the same options object that we use when we define an application instance' muddies that distinction in a way that reinforces the common misunderstanding.
• Reusable Components With Props - 5:43. The plan names would be on the root component, not the application instance.
• Nested Components In Vue - 0:17. As above, it's the root component that has data, not the application instance.
• Global vs Local Vue Components - 0:16. The proposed change is accurate but you may want to consider whether you'd rather just say 'application' or 'application's' rather than 'application instance'. We often drop the word instance in the docs if it's already unambiguous in the context.

data as object no longer valid on root

• Global vs Local Components - 3:35. The parent is the root component instance, not the application instance.

[danielkellyio]

@skirtles-code Yes all that makes sense. I will note those corrections.

I think that leaves just this issue unsolved:

• Intro to Vue 3 Components - 0:56 - What do you think on this one changing: "Know here that this is the same options object that we use when we define a Vue instance" to "This object includes options like data, computed, methods, and so on"

Thanks!

[skirtles-code]

@danielkellyio The proposed correction at 0:56 sounds good to me.

[danielkellyio]

@skirtles-code all of the discussed revisions have been made and published to the courses. Thanks!

[danielkellyio]

@skirtles-code just checking in on this to see if anything else needs to be done on my side before merge. Thanks!

[skirtles-code]

@danielkellyio The thing that's currently holding this up is reviewing the subtitles. I've only watched through a couple of them and there are lots of typos and it takes me a ridiculously long time to create a full list of all the corrections and their timestamps. If I were reviewing the same thing as text it would take no time at all.

Is there any way we can speed up this process? I don't really have time to go through all of these videos creating lists of all the subtitle corrections. Can somebody at Vue School with direct access to edit the subtitles make these corrections so all I have to do is check them?

[danielkellyio]

@skirtles-code I can definitely get somebody on our side to go through the subtitles and make corrections. My apologies, I didn't review them myself and assumed they were good. I'll let you know once that's complete. Thanks!

[danielkellyio]

@skirtles-code I've gone through the subtitles and made corrections where necessary. Thanks!

[danielkellyio]

@skirtles-code just checking in on this. I think all the blockers have been removed on our side. Thanks!

[skirtles-code]

@bencodezen FYI, this video is a new addition.