Introducing Writing Plugins

[00:00:00]
>> Evan You: So we're done with the reactivity system. We got something very basic working. And if inside the functions, you're doing some manipulations, you've essentially built a tiny reactivity engine that can automatically keep your state and in sync, right? So that's the very simple version of how vue's update system actually works.

[00:00:25]
And next we are going to take little detour into another topic. Let's talk about writing plugins. So, you probably used a plugin before with vue.use. And how many of you have read the page about writing plugins in the docs? No one?
>> Speaker 2: Glanced?
>> Evan You: Glanced, okay. All right, so essentially a plugin is just a function that receives Vue as the first argument and optionally second argument options.

[00:01:02]
And then you do something with Vue inside your plugin. That's the higher level Vue of it, but some of the commonly used techniques when you're writing plugins involves this Vue.mixin API. How many of you have used mixins?
>> Evan You: Okay. So mixins are essentially parts reusable snippets or parts of Vue component options that can be mixed into an existing component, all right?

[00:01:38]
So you can use them on a per component basis but Vue.mixin is a global API that will apply a mixin to every instance created from then on, right? So it's very powerful, but the greater the power the greater the responsibility. So you don't do crazy things inside the global mixins, all right, because it affects every instance.

[00:02:01]
But it's very commonly, if you want to apply some global functionality to your Vue app, you will be using global mixins. And usually it's a better idea to wrap this with a plugin interface because plugins are automatically deduped. If you have multiple vue.use calls to the same plugin it will prevent it from being applied over and over again.

[00:02:22]
The vue.mixin doesn't do that. So it's best practice to always wrap global mixins in a plugin interface. And it's also more consistent when you see your entry script. You always see vue.use, this plugin, that plugin. It's more consistent that way. And the other commonly used thing is this dollar options property, instance property.

[00:02:45]
So probably not many of you know this thing exists, but this dot dollar options exist on every component and this contains the merged, normalized options object of that specific instance, because we know Vue component options can come from a lot of places. It can come from global mixins.

[00:03:09]
It can come from the component's own definition. It can come from the options you pass to it when you're creating the instance, all right. And it can be also from an answers component if you have further chains of view.extend along the way. So all of these options need to be merged and normalized into this final options object for that instance, and that is $options for each instance.

[00:03:37]
And interestingly, this also contains any custom options that you added to that component. So it doesn't have to be a built-in option. So we will just merge everything in here.