Plugin creation basics in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a Vue plugin with an install function.

Vue

const MyPlugin = {
  [1](app) {
    // plugin logic here
  }
};

Drag options to blanks, or click blank then click option'

Ainstall

Bcreate

Csetup

Dinit

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'create' or 'setup' instead of 'install' for the plugin method.

Forgetting to define the install method as a function.

A Vue plugin must have an 'install' method that Vue calls when the plugin is used.

2fill in blank

medium

Complete the code to register a global component inside the plugin's install method.

Vue

const MyPlugin = {
  install(app) {
    app.[1]('MyComponent', {
      template: '<div>Hello from plugin!</div>'
    });
  }
};

Drag options to blanks, or click blank then click option'

Acomponent

Buse

Cregister

DaddComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'use' which is for plugins, not components.

Trying to use 'register' or 'addComponent' which do not exist.

The 'component' method registers a global component in Vue 3 inside the app instance.

3fill in blank

hard

Fix the error in the plugin code to properly add a global property.

Vue

const MyPlugin = {
  install(app) {
    app.config.globalProperties.[1] = () => 'Hello!';
  }
};

Drag options to blanks, or click blank then click option'

Ahello

B$hello

CHello

Dhello$

Attempts:

3 left

💡 Hint

Common Mistakes

Defining global properties without the '$' prefix.

Using uppercase letters which is not a convention here.

Global properties in Vue 3 must start with '$' to avoid conflicts with component properties.

4fill in blank

hard

Fill both blanks to create a plugin that adds a directive named 'focus'.

Vue

const FocusPlugin = {
  install(app) {
    app.[1]('focus', {
      mounted(el) {
        el.[2]();
      }
    });
  }
};

Drag options to blanks, or click blank then click option'

Adirective

Bcomponent

Cfocus()

Dfocus

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'component' instead of 'directive' to register a directive.

Trying to call 'focus' without parentheses or with wrong syntax.

The 'directive' method registers a directive, and calling 'el.focus()' sets focus on the element.

5fill in blank

hard

Fill all three blanks to create a plugin that adds a global method and a component.

Vue

const MyPlugin = {
  install(app) {
    app.config.globalProperties.[1] = () => 'Hi!';
    app.[2]('Greeting', {
      template: '<p>{{ BLANK_3 }}</p>'
    });
  }
};

Drag options to blanks, or click blank then click option'

A$greet

Bcomponent

CHello from plugin!

Ddirective

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'directive' instead of 'component' to register the component.

Not using '$' prefix for global properties.

Leaving the template blank or incorrect.

Global properties start with '$', 'component' registers a global component, and the template shows the greeting text.