[Vue3] Custom Directives

Vue3 allows that user defines their own directives.

Create a Project

Let's create a project first.

2021.06.02 - [Web/JavaScript] - [Vue3] Getting Started with Vue3 + TypeScript + TailwindCSS

Create Own Directives in Global

Creating a global custom directive uses directive method.

 

main.ts

const app = createApp(App)
app.directive("focus", {
  mounted: (el) => el.focus(),
});
app.mount("#app");

We created our directive named focus.

Let's use this.

 

components/custom_directive.vue

<template>
  <div class="p-4 flex flex-col justify-center items-center">
    <h2 class="mt-8 mb-2 text-xl font-medium text-green-600">Global</h2>
    <input
      type="text"
      v-focus
      class="w-2/12 px-2 py-1 text-gray-700 outline-none"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "CustomDirective",
});
</script>

We use it with prefix v- (i.e. v-focus).

And render this and test this!

 

App.vue

<template>
  <div class="my-4 flex justify-center items-center">
    <CustomDirective />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import CustomDirective from "./components/custom_directive.vue";

export default defineComponent({
  name: "App",
  components: {
    CustomDirective,
  },
});
</script>

Great! It works!

Create Own Directives in Local

Let's create another directive locally.

 

components/custom_directive.vue

<template>
  <div
    style="height: 3000px"
    class="p-4 flex flex-col justify-start items-center"
  >
    <h2 class="mt-8 mb-2 text-xl font-medium text-green-600">Local</h2>
    <div v-pin="position" class="p-4 bg-green-300 text-gray-700">
      Fixed Area
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "CustomDirective",
  data: () => {
    return {
      position: { top: 50, left: 50 },
    };
  },
  directives: {
    pin: {
      mounted: (el, binding) => {
        el.style.position = "fixed";
        el.style.top = binding.value.top + "px";
        el.style.left = binding.value.left + "px";
      },
    },
  },
});
</script>

We need to use the directives property when we create custom directives locally.

In this code, we create a custom directive named pin and use it as v-pin.

This custom directive makes an HTML element sticky.

Try to scroll! It will stick to the top-left corner of the browser.

The inspector shows us like this.

I hope you could figure out the operation through this.

Conclusion

Custom directives give us many benefits.

Now, we know how to create custom directive and how to use it.

Go apply it to your code!