Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 548
Bogdan Avatar asked Dec 17 '22 17:12

Bogdan


2 Answers

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>

like image 143
dvl333 Avatar answered Dec 20 '22 17:12

dvl333


// 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>
like image 21
Bishal Jung Chettri Avatar answered Dec 20 '22 18:12

Bishal Jung Chettri