web-dev-qa-db-fra.com

Laravel 5.4 Vue.JS Échec du montage du composant: fonction de modèle ou de rendu non définie

Commençons par Vue.js et souhaitons essayer l’exemple fourni avec laravel.

Aucun composant n'est affiché et je reçois en console

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <Example>
   <Root>

Pas une nouvelle installation, mise à jour de 5.2-> 5.3-> 5.4

ressources/assets/js/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('example', require('./components/Example.vue'));

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

ressources/assets/js/composants/Example.vue

<template>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Example Component</div>

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

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

C'est la lame dans laquelle j'ai le js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Testing</title>
    <link rel="stylesheet" href="css/app.css">
    <meta name="csrf-token" content="{{ csrf_token() }}">
</head>
    <body>
    <div id="app">
        <example></example>
    </div>
        <script src="js/app.js" charset="utf-8"></script>
    </body>
</html>

webpack.mix.js

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

mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css');
laravelvue.js
6
Carlos F

Cela dépend de la façon dont vous montez Vue. Une fois, il a besoin du compilateur et une autre fois https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only . 

Vous pouvez essayer à ma façon (c'est un projet pur vue, fabriqué à partir du modèle vue webpack):

import Vue from 'vue'
import App from './App'
import Example from './components/Example'
import router from './router' //this will import router/index.js

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App, Example }
})

Cela montera le composant dans l'objet global.

6
cssBlaster21895

Ce devrait être require('./components/Example.vue').default. Depuis la version 13, vue-loader exporte le composant en tant que clé par défaut, qui fonctionne toujours de la même manière lorsque vous utilisez import, mais requiert ce qui précède lorsque vous utilisez require.

22
Abhishek kushwaha

Pour l'instant, le plâtre que j'ai est d'ajouter un 'default ()' à tous les composants de l'objet Vue.

Vue.component('form-component', require('./components/FormComponent').default);
Vue.component('gratitude-pop', require('./components/GratitudePop').default);//..etc..etc

Lancer ce paquet:

  "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"
    },
    "dependencies": {
        "vuex": "^3.0.1"
    }

Lancez vos pouces pour utiliser VUEX; P

4
clusterBuddy

Essaye ça

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

J'ai résolu ce problème facilement en utilisant la méthode .default à la fin du fichier require().defaultde la ligne suivante.

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

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('example-component', require('./components/ExampleComponent.vue'));
Vue.component('articles', require('./components/ArticleComponent.vue').default);

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