TypeError：无法读取未定义的“已创建”属性，未定义错误“Vue” Vue.js 3

Question

i'm trying to use Custom Directives in vue.js 3 from the documentation, and i use the example that in the documentation but i've these errors:

• 'Vue' is not defined.

and when i remove "vue" from the Directive code these errors show in the console:

• Uncaught (in promise) TypeError: Cannot read property 'created' of undefined
• Uncaught (in promise) TypeError: Cannot read property 'parentNode' of null

I think these error cuz i use vue version 3 but i'm using Custom Directives that in Vue vesion 3 from documentation

main js:

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import "./scss/main.scss";
import "normalize.css";

createApp(App).use(store).use(router).mount("#app");

//Directive

const app = vue.createApp({})
app.directive('highlight', {
    beforeMount(el, binding) {
        el.style.background = binding.value
    }
})

component:

<p v-highlight="'yellow'" class="content">{{ limit(content,90, 'more...') }}</p>

Could you help me

Answer 1

There's no object or function called vue in Vue 3, to register a global directive just you the app instance already defined like:

...
const app=createApp(App)
app.use(store).use(router).mount("#app");

app.directive('highlight', {
    beforeMount(el, binding) {
        el.style.background = binding.value
    }
})