<template>
  <div>
    <h1 v-focus>Hello Vue.js!</h1>
  </div>
</template>

<script>
export default {
  directives: {
    focus: {
      mounted(el) {
        el.focus();
      }
    }
  }
};
</script>

<template>
  <div>
    <p v-color="'red'">This text is red.</p>
    <p v-color="'blue'">This text is blue.</p>
  </div>
</template>

<script>
export default {
  directives: {
    color: {
      mounted(el, binding) {
        el.style.color = binding.value;
      }
    }
  }
};
</script>

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.directive('uppercase', {
  mounted(el) {
    el.style.textTransform = 'uppercase';
  }
});

app.mount('#app');

<template>
  <p v-uppercase>This text will be uppercase.</p>
</template>

// plugins/myPlugin.js
export default {
  install(app) {
    app.config.globalProperties.$greet = (name) => `Hello, ${name}!`;
  }
};

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import myPlugin from './plugins/myPlugin';

const app = createApp(App);
app.use(myPlugin);
app.mount('#app');

<template>
  <div>{{ greetMessage }}</div>
</template>

<script>
export default {
  data() {
    return {
      greetMessage: ''
    };
  },
  mounted() {
    this.greetMessage = this.$greet('Vue.js');
  }
};
</script>

// plugins/api.js
import axios from 'axios';

export default {
  install(app) {
    const apiClient = axios.create({
      baseURL: 'https://api.example.com',
      timeout: 1000
    });

    app.config.globalProperties.$api = apiClient;
  }
};

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import apiPlugin from './plugins/api';

const app = createApp(App);
app.use(apiPlugin);
app.mount('#app');

<template>
  <ul>
    <li v-for="user in users" :key="user.id">{{ user.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      users: []
    };
  },
  async mounted() {
    const response = await this.$api.get('/users');
    this.users = response.data;
  }
};
</script>