Vue component not showing up in laravel

Question

My vue component isn't showing up and I can't see where I went wrong, I'm hoping another set of eyes can point out where I went wrong. I'm running npm run watch and I've cleared my cache.

My app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('table-draggable', require('./components/TableDraggable.vue'));
Vue.component('category-index', require('./components/CategoryIndex.vue'));
Vue.component('active-checkbox', require('./components/ActiveCheckbox.vue'));
Vue.component('supplier-code-selection', require('./components/SupplierCodeSelection.vue'));

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

My SupplierCodeSelection.vue

     <template>
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-8">
                        <div class="card">
                            <div class="card-header">Supplier Code Selection Component</div>

                            <div class="card-body">
                                I'm an example component.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </template>

        <script>
            export default {
                mounted() {
                    console.log('Component mounted.')
                }
            }
        </script>

my page that the vue is supposed to show

<div id="app">
    <supplier-code-selection></supplier-code-selection>
</div>

I also get this error in my console

[Vue warn]: Unknown custom element: <supplier-code-selection> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

My composer.json

{
    "name": "laravel/laravel",
    "description": "The Laravel Framework.",
    "keywords": ["framework", "laravel"],
    "license": "MIT",
    "type": "project",
    "require": {
        "php": "^7.1.3",
        "fideloper/proxy": "^4.0",
        "laravel/framework": "5.6.*",
        "laravel/tinker": "^1.0",
        "laravelcollective/html": "^5.4.0"
    },
    "require-dev": {
        "filp/whoops": "^2.0",
        "fzaninotto/faker": "^1.4",
        "mockery/mockery": "^1.0",
        "nunomaduro/collision": "^2.0",
        "phpunit/phpunit": "^7.0"
    },
    "autoload": {
        "classmap": [
            "database/seeds",
            "database/factories"
        ],
        "psr-4": {
            "App\\": "app/"
        },
        "files": [
            "app/Support/helpers.php"
        ]
    },
    "autoload-dev": {
        "psr-4": {
            "Tests\\": "tests/"
        }
    },
    "extra": {
        "laravel": {
            "dont-discover": [
            ]
        }
    },
    "scripts": {
        "post-root-package-install": [
            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
        ],
        "post-create-project-cmd": [
            "@php artisan key:generate"
        ],
        "post-autoload-dump": [
            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover"
        ]
    },
    "config": {
        "preferred-install": "dist",
        "sort-packages": true,
        "optimize-autoloader": true
    },
    "minimum-stability": "dev",
    "prefer-stable": true
}

and my package.json

{
    "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.0",
        "lodash": "^4.17.4",
        "popper.js": "^1.12",
        "vue": "^2.5.7",
        "vuedraggable": "^2.16.0"
    }
}

Answer 1

For Laravel 10 using Vite:

In vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    // The Vue plugin will re-write asset URLs, when referenced
                    // in Single File Components, to point to the Laravel web
                    // server. Setting this to `null` allows the Laravel plugin
                    // to instead re-write asset URLs to point to the Vite
                    // server instead.
                    base: null,
 
                    // The Vue plugin will parse absolute URLs and treat them
                    // as absolute paths to files on disk. Setting this to
                    // `false` will leave absolute URLs un-touched so they can
                    // reference assets in the public directory as expected.
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

In resources/js/app.js:

import './bootstrap';
import { createApp } from 'vue/dist/vue.esm-bundler.js';
import yourcomponent from './components/yourcomponent.vue';
const app = createApp({});
app.component('yourcomponent', yourcomponent);
app.mount('#app');

Note: /dist/vue.esm-bundler.js seems to be required since vue alone won't work.

In your blade file:

@vite(['resources/css/app.css', 'resources/js/app.js'])

<div id="app">
    <yourcomponent />
</div>

Finally:

npm run build

or:

npm run dev

Note: if you're using Laravel Sail, remember to prefix the npm command with sail.

Answer 2

Briefly, the common causes of this problem are as follows:

1. If you don't include app.js file in the footer of page

If you use laravel you can include it as you see:

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

but if you use vite in development mode the best way is as follow:

@vite(['resources/js/app.js'])

2. If you try to use your component out of the element that you select in Vuejs

For example in Vuejs i select my app as div has app as id like you see

app.mount("#app");

so i have to put my code in element witch has app as id, as you see bellow (this is part of my master layout)

<div id="app" class="app">
@section('content')

@show
</div>

3. If you don't convert you Vuejs to js app

So you have to run "npm run dev" after any changes that's if you don't use vite

4. If you have error in app.js file so you have to check your console in browser

5. If you don't declare your component Witch you can declare your component in old version in this way

 Vue.component('orders-table', require('./components/orders/_table.vue').default);

And in recent version in this way

import Orders from "./components/orders/_table.vue";
app.component("orders-table", Orders);

There are other errors but i think this is the common.

Answer 3

Simply add .default:

 Vue.component('supplier-code-selection', require('./components/SupplierCodeSelection.vue').default);

Answer 4

hello)) maybe it too late but it can be usefull to someone else)). so i solved this kind of issue by this peace of cod render: h => h(Main). Added it in new Vue({});

Answer 5

Your code is correct, but it seems that you forgot to include loading css/js files in your HTML.

Add this to the <head>:

<link rel="stylesheet" href="{{ mix('css/app.css') }}" />
<script defer src="{{ mix('js/app.js') }}"></script>

---

I also suggest using npm run hot (or yarn hot), that will add hot code reload.

Answer 6

Try the following code by adding the default property :

Vue.component('category-index', require('./components/CategoryIndex.vue').default);

or try this :

 ....
 import SupplierCodeSelection from './components/SupplierCodeSelection.vue'

  const app = new Vue({
       el: '#app',
       components:{'supplier-code-selection':SupplierCodeSelection } 
    });

and

     <script>
        export default {
          name:'supplier-code-selection',
            mounted() {
                console.log('Component mounted.')
            }
        }
    </script>