Laravel-Vue component

Question

i'am trying to attach a vue component with a tag

MyComponent.vue

<template>
    <div>
        <h1>Hi</h1>
    </div>
</template>

<script>
export default {

}
</script>

this is app.js

require('./bootstrap');

window.Vue = require('vue');

import MyComponent from './components/MyComponent.vue';

Vue.component('myComponent', MyComponent);


const app = new Vue({
    el: '#app'
})

And this is the body of my welcome.blade

<body>
    <div id="app">
        <myComponent></myComponent>
    </div>

    <script src="{{ mix('js/app.js') }}"></script>
</body>

and i get this error

Unknown custom element: mycomponent - did you register the component correctly? For recursive components, make sure to provide the "name" option.

check public/js/app.js file is there if not then run npm run watch comand — Developer
– Developer, Commented Nov 16, 2020 at 12:45

Developer · Accepted Answer · 2020-11-16 12:48:58Z

0

In general, before the ending </body> tag. Check this link for referance

<body>
  <div id="app">
    <my-component></my-component>
  </div>

   <script src="{{ asset('js/app.js') }}"></script>
</body>

answered Nov 16, 2020 at 12:48

Developer

4647 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-15 00:38:50Z

0

try this as vuejs use case sensitive

Vue.component('my-component', require('./components/MyComponent.vue').default);

and html

<body>
    <div id="app">
        <my-component></my-component>
    </div>

    <script src="{{ mix('js/app.js') }}"></script>
</body>

ref link https://v2.vuejs.org/v2/style-guide/

edited Jul 15, 2022 at 0:38

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 16, 2020 at 12:26

Kamlesh Paul

12.5k2 gold badges23 silver badges36 bronze badges

1 Comment

Kamlesh Paul Over a year ago

@user7385152 import same as i m doing and compile your js

Collectives™ on Stack Overflow

Laravel-Vue component

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related