All language subtitles for 002 Registering a Plugin_en

In this lecture.

The next step is to register the validation library we installed in our project.

There are two ways we can approach this.

We can register it locally or globally.

The approach you'll want to use depends on how often you plan on using validation.

If you're going to use validation for one or two forms, registering it locally is the way to go.

However, we'll be using it more than once.

Registering it globally is the way to go.

One problem with this approach is how much configuration will have to deal.

Validate is a very powerful library because validation varies from form to form, it's able to accommodate

most scenarios.

We'll be writing a lot of code for configuring this library.

We don't want to clutter the code inside the main JS file with too much configuration.

We want to keep it as light as possible.

We'll outsource the configuration in a separate file by creating a custom plugin.

Up until now, we've been installing libraries that come bundled us plugins.

We registered plugins by using the use function.

On the view instance, we can create a custom plugin to extend view.

Let's try creating a custom one for registering validate inside the source directory.

We'll create a folder called includes.

This directory is where we'll define our custom plugins.

In some projects there are developers who will use the name plugins for their directory.

We're using a different naming convention because we'll be placing non plugin files in this directory.

If you want, feel free to further organize the project by creating a directory called plugins exclusively

for plugin files.

We will keep it simple by having one directory for everything.

Inside this directory will create a file called Validation JS.

Inside the file.

We'll create a plugin by exporting an object under the default namespace.

The object will have one method called install.

Plugins are objects with a method called install if you will call the install method when we register

it.

Let's do that next.

And the main JS file will import the plug in under the name V validate plug in.

Next we'll call the use function below the other use functions we'll pass in our custom plugin.

Before of you mounts our application, it'll run the install method in our plugin.

Inside the install method, we are allowed to do anything we want.

We can register components, directives, etc. there are two arguments we can accept in the install

method there.

The app and options arguments.

The EP argument is a reference to the View application.

We have access to the same methods and properties we would normally encounter on The View, and since

the options argument is additional data passed from the view instance to the plugin back in the main

JS file.

The use function has a second optional parameter we can pass in an object that we would like to provide

the plugin.

For example, I'll pass in an object with a random property.

The object will be the value for the second argument in the install function.

Typically, developers use this to allow other developers to configure how the plugin will function.

It varies from plugin to plugin.

So far we haven't had to configure any of the plugins we've installed.

We won't need this parameter for our project.

This custom plugin is exclusively for this project.

We'll be removing its use in both files.

Back to the task at hand.

In the validation file, we're going to register two components.

First, we'll import them at the top of the file.

We'll import two components from the validate package there, the form and field components.

The components we're importing were specifically designed to help us validate a form.

We'll learn how they'll help us in upcoming lectures.

We're going to register the components globally because we'll be performing validation on various forms

in our app.

There is one problem with the name of the components.

There's already an element with the name form.

We don't want to cause conflicting issues in our app.

We'll rename the components in the import statement by using the as keyword.

We'll rename the form component to the form.

The field component will be renamed to the fields.

Inside the install method.

We'll register both components with the component function.

We're finished.

Let's test if everything is working.

If you haven't already, turn on the server.

View the app in the browser.

Everything should still be working.

There shouldn't be any errors in the console.

Congrats.

We've successfully installed the validate library.

We can proceed with form validation.