[Vue warn]: Unknown custom element: <example-component> - did you register the component correctly?

You need to remove @yield('content')

@petrir Just tried that but still not working after removing the @yield('content) part

Did you compile ? npm run watch before making changes ? Since its default example component should work. You can try to compile once just in case, if no errors should work.

yes

Does it work now ? If its working can you select my answer as the correct one please :) @nhayder

@petritr No its not working

npm run dev or watch // did't fix it
php artisan cache:clear// did't fix it

Does the component name has the correct name ExampleComponent.vue ? Also is the path correct ? /components/ExampleComponent.vue

@petritr file name is ExampleComponent.vue on my HD

this is how i called it from app.js

Vue.component('example-component', require('./components/ExampleComponent.vue'));

these files are not changed since i started this project? they are as laravel provided them.

ITS REALY STRANGE, Nothing is fixing it???

Hmm, can you check in package.json for devDependencies if there is an vuedependency ?

Must be working also can you show me the the log of compile when running npm run watch when you change something on ExampleComponent file ?

@petritr this package.jason

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.18",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^2.1.14",
        "lodash": "^4.17.4",
        "popper.js": "^1.14.4",
        "tailwindcss": "^0.6.5",
        "vue": "^2.5.7"
    },
    "dependencies": {
        "@ckeditor/ckeditor5-build-classic": "^10.0.1",
        "ajv": "^6.5.3",
        "imagemin": "^6.0.0",
        "laravel-mix-tailwind": "^0.1.0",
        "tooltip.js": "^1.3.0",
        "vue-js-modal": "^1.3.26"
    }
}

also you want log of compile when running npm run watch ??? is this same storage/logs/laravel.log ???? or is it deferent file ????

The last changes from the terminal when already run npm run watch try to change something inside ExampleComponent.vue file and send me the log from the terminal related to those changes.

@petritr made some change on ExampleComponent.vue file

hassan-MacBook-Pro:MyApp hassanmansoor$ npm run dev

> @ dev /Applications/MAMP/htdocs/MyApp
> npm run development


> @ development /Applications/MAMP/htdocs/MyApp
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

 95% emitting                                                                         

 DONE  Compiled successfully in 3743ms                                                                                                                15:42:05

            Asset     Size  Chunks                    Chunk Names
  /js/app.js  1.43 MB       0  [emitted]  [big]  /js/designer
/css/app.css   424 kB       0  [emitted]  [big]  /js/designer
/css/front.css  2.69 MB          [emitted]         
  /js/front.js  3.28 MB          [emitted]         
hassan-MacBook-Pro:MyApp hassanmansoor$ 

Seems like everything is good, can you see the component compiled inside /js/app.js ?

And try to past the component inside blank index.blade.php in root view (just this no other html)

 <div id="app">
        <example-component></example-component>
    </div>

can u also check your browser console and see if there is any message

incase you are extending layouts/app.blade.php for the blade file below

 <div id="app">
        <example-component></example-component>
    </div>

make sure you only have id=app in one file

 id="app"

then make sure this is the structure

 <div id="app">
     <div>
          //all your other content can go inside this div
        <example-component></example-component>
     </div>
 </div>

and go to where u import your app.js ...if there is a defer attribute on the script tag .remove the

defer

recompile and test

@petritr i think you nailed it this time, the component is available on the compiled file but its commented out (with // )

// Vue.component('example-component', require('./components/ExampleComponent.vue'));

plus i found old vue functions and methods that i used 3 days ago in same compiled file which where removed from my current version, these functions are not available on the updated app.js.

it looks like mix is either not compiling my app.js file or im loading the wrong js film from blade master layout.

@nhayder thanks :) must be one of thous cant be a mystery just check things one by one. Can i get the correct answer ? :))

@petritr than you for the help

@nhayder you are welcomed, please click the correct answer for me :)

@petritr I did Liked all of you comments and i gave you best answer. properly email queue was little bit slow today :-) check now, its online

How you fixed lol?