Laravel 5.1: Vuejs component not showing in my laravel blade

I am using laravel and vue and it is unable to load components into blade page. It showing empty.

I have tried many solutions but doesn't work.

welcome.blade

<!doctype html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="csrf-token" content="">
 <script>window.Laravel = { csrfToken: '' }</script>
    <title>App</title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css? family=Nunito:200,600" rel="stylesheet">  
</head>
<body>
<script type="text/javascripts" src="js/app.js"></script>
    <div id ="app">
    <div class="container">
    <articles></articles>
    </div> 
    </div>    
    </body>
    </html>

Articles.vue

<template>
<div>
<h2>Articles</h2>
</div>
</template>

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');

import articles from './components/Articles'
    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));

/** * 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('articles', require('./components/Articles.vue'));

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

Composer.json

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

I was expecting to see Articles as h2 but it shows nothing and when I inspect element I see this error

"Uncaught TypeError: Vue.components is not a function".

Any help will be appreciated.

via Chebli Mohamed

Laravel 5.1

mardi 28 mai 2019

Vuejs component not showing in my laravel blade

Aucun commentaire:

Enregistrer un commentaire