Reputation: 399

Laravel: vue components not rendering

My vue components are not rendering on the page, despite following tutorials. I have the following layout (master.blade.php):

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Mileage</title>
    <link rel="stylesheet" href="{{ mix('/css/app.css') }}" media="all">
</head>

<body>
    <div id="app">
        <example-component></example-component>
    </div>
    <script src="{{ mix('/js/app.js') }}"></script>
</body>
</html>

The layout is returned by the following controller (I use CAS for login):

<?php

namespace App\Http\Controllers;

use App\LkpStaff;
use Illuminate\Http\Request;

class AuthController extends Controller
{
    public function login()
    {
        if (!cas()->isAuthenticated())
        {
            cas()->authenticate();
        }

        $user = cas()->user();

        $dbUser = LkpStaff::where('user_name', $user)->first(['staff_refid']);

        if ($dbUser)
        {
            $userId = $dbUser->staff_refid;
        }else
        {
            $userId = $this->createNewUser($user);
        }

        session()->put('casUser', $user);
        session()->put('userId', $userId);

        return view('master', [
            'casUser' => $user,
            'userId' => $userId
        ]);
    }
}

The CAS login works as intended, so that's not a problem. I am simply trying to render the example component that comes with laravel (ExampleComponent.vue):

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example 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 app.js file registers the component as expected:

require('./bootstrap');

window.Vue = require('vue');


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

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

My package.json is the following:

{
    "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": "^4.0.7",
        "lodash": "^4.17.5",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    },
    "dependencies": {
        "bulma": "^0.7.0",
        "font-awesome": "^4.7.0",
        "laravel-blade-compiler": "^1.0.10",
        "moment": "^2.24.0",
        "purify-css": "^1.2.5"
    }
}

I used npm install and npm run dev. I served the project with php artisan serve. The page looks like this (in the browser console):

<html><head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="csrf-token" content="gLzt6ZloAyL7kFEVuO0tHlv6XqlsCMlELSx9Eqg6">
    <title>Mileage</title>
    <link rel="stylesheet" href="/css/app.css" media="all">
</head>

<body>
    <div id="app">
        <example-component></example-component>
    </div>
    <script src="/js/app.js"></script>

</body></html>

As you can see, the component is not rendered. There are no errors in the console either. Is there anything I can do short of creating a new project?

Upvotes: 5

Answers (5)

Aimé Ig.

Reputation: 1

Have you tried running npm run dev alongside php artisan serve then reload the page? This worked well from my end.

Upvotes: 0

Skykid Felix

Reputation: 194

It could most likely be a caching plugin that's causing it. See if you have Cloudflare or Nitropack installed or any other similar caching plugin

Upvotes: 0

Glenn Carlo Baquero

Reputation: 11

try to add div element below of template and inside of the div enter your code and then in your terminal enter npm run watch or npm run dev wait until the compiled message comes up in your terminal if their is error it will prompt you

Upvotes: 1

Bishal Jung Chettri

Reputation: 384

// UPDATE

require('./bootstrap');

window.Vue = require('vue');

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

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

add .default in component in your app.js. Change your link and script uri

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

Upvotes: 4

dvl333

Reputation: 183

Maybe your component is not rendering due to wrong path issue for app.css and app.js.

Try to render by using asset like :

<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">

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

Upvotes: 6

Laravel: vue components not rendering

Answers (5)

Related Questions