Блог

ошибка: Cannot read properties of undefined (reading 'component')

я работаю над vue.js3 laravel8

Я пытаюсь зарегистрировать свой повторно используемый компонент my-button в качестве глобального компонента

vue.js3 lorevel8

мой app.js

 window.Vue = require('vue').defau<
import { createApp } from 'vue';
import router from "./router";
import components from './components/UI'

components.forEach(component => {
    app.component(component.name, component)
})

const app = createApp({})
app.use(router)
   .mount("#app")
 

мой Index.js

 import MyButton from "./MyButton";


export default  [
    MyButton
]
 

моя кнопка.vue

 <template>
    <button class="btn">
        <slot></slot>
    </button>
</template>


<script>
export default {
    name: "my-button"
}
</script>

<style scoped lang="scss">

.btn {
    background-color: var(--color-primary-light);
    color: #fff;
    border: none;
    border-radius: 0;
    font-family:'Josefin Sans', sans-serif;
    font-size: 1.5rem;
    text-transform: uppercase;
    padding: 1.8rem 3rem;
    cursor: pointer;
    transition: all .2s;

amp;:hover {
     background-color: var( --color-primary-dark);
 }
}

</style>
 

ошибка: Не удается прочитать свойства неопределенного (чтение «компонента»)

Кто-нибудь может мне помочь, пожалуйста ?

не могу разобраться в свойствах неопределенных

я споткнулся

 const app = createApp ({}) 
 

должен прийти раньше

 components.forEach (component => {
    app.component (component.name, component)
})
 

Я тоже столкнулся с этой проблемой. Однако мне удалось решить эту проблему, поэтому я делюсь своим ответом.

Используя Vue3, чем вносить необходимые изменения в свой app.js:

 import {
  createApp
} from 'vue';
const app = createApp({});

// You can register your components globally like this also
// Add as many components as you want.

app.component('Name of your component', require('Path to the component').default)

// In your case 
app.component('my-button',require('Path to the component').default);

app.mount('#app');
 

Я думаю, что это должно решить проблему.
Пожалуйста, проверьте.