Componants in Vue

Components are the fundamental building blocks of Vue applications, primarily used for constructing UI elements and page structures. They encapsulate reusable code segments that can include a template, logic, and styling. Components can be nested or used independently, helping developers break down complex interfaces into manageable and reusable parts.

Creating Components

Components are commonly defined using the single-file component (SFC) structure, where each .vue file represents a separate component:

<template>
  <div>Reusable UI element</div>
</template>

<script>
export default {
  name: 'ReusableComponent'
}
</script>

<style>
.reusable {
  color: #333;
}
</style>

Alternatively, components can be defined using the template property:

<template id="simple-component">
  <div>This is a basic component</div>
</template>

Vue.component('basic-component', {
  template: '#simple-component'
});

// Inline template
Vue.component('inline-component', {
  template: `<div>Simple inline component</div>`
});

Component Registration

Components can be registered either globally or locallly. Global registration is done via Vue.component():

Vue.component('global-component', {
  template: `<div>Available globally</div>`
});

Local registration limits component availability to a specific scope:

const LocalComponent = {
  template: `<div>Only available here</div>`
};

export default {
  components: {
    LocalComponent
  }
}

Using Components

Components are utilized in templates by referencing their tag names:

<div id="app">
  <global-component></global-component>
  <local-component></local-component>
</div>

Plugins in Vue

Plugins are designed to extend Vue applications with global-level functionality. They can introduce new features, utilities, or enhancements that are accessible across the entire application, including global methods, directives, mixins, and instance properties.

Implementing Plugins

A Vue plugin must provide an install method that accepts the Vue constructor and an optional options object:

const MyPlugin = {
  install(Vue, options) {
    // Add global method
    Vue.addFeature = function () {
      console.log('Global method invoked');
    };

    // Register a custom directive
    Vue.directive('highlight', {
      bind(el) {
        el.style.backgroundColor = 'yellow';
      }
    });

    // Inject options via mixin
    Vue.mixin({
      created() {
        if (options.log) {
          console.log('Injected via mixin');
        }
      }
    });

    // Add instance method
    Vue.prototype.$logState = function () {
      console.log('Instance method called');
    };
  }
};

Registering Plugins

Plugins are registered using Vue.use():

Vue.use(MyPlugin, { log: true });

Using Plugin Features

Once installed, plugin features can be accessed globally or within component instances:

new Vue({
  el: '#app',
  mounted() {
    Vue.addFeature(); // Global method
    this.$logState(); // Instance method
  }
});