6 months ago

Vuejs component simply not loading

Posted 6 months ago by cac

I am trying to experiment vue js on a new fresh laravel installation and it simply does not work even though I follow the documentation.

I did ran the following commands: npm install npm run watch

Everything compiles perfectly and there are no errors on the console


 * 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.


window.Vue = require('vue');

 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>

// const files = require.context('./', true, /\.vue$/i);
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));

Vue.component('app', require('./components/App.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.

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


const mix = require('laravel-mix');

 | Mix Asset Management
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');


    <div class="app-component">
        <p>App Component</p>

    export default {
        mounted() {
            console.log('Component mounted.')

<style scoped>



<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <!-- Fonts -->
    <link href=",600" rel="stylesheet">

    <!-- Styles -->
        html, body {
            background-color: #fff;
            color: #636b6f;
            font-family: 'Nunito', sans-serif;
            font-weight: 200;
            height: 100vh;
            margin: 0;

        .full-height {
            height: 100vh;

        .flex-center {
            align-items: center;
            display: flex;
            justify-content: center;

        .position-ref {
            position: relative;

        .top-right {
            position: absolute;
            right: 10px;
            top: 18px;

        .content {
            text-align: center;

        .title {
            font-size: 84px;

        .links > a {
            color: #636b6f;
            padding: 0 25px;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: .1rem;
            text-decoration: none;
            text-transform: uppercase;

        .m-b-md {
            margin-bottom: 30px;
<div id="app">


Please sign in or create an account to participate in this conversation.