Vue.js + Laravel5.7 'Hello World' Test not work

Question

i want render Vue.js Code but NOT WORKING IN LARAVEL 5.7

My app.js Code :

require('./bootstrap');

window.Vue = require('vue');

Vue.component('hello-world-component', require('./components/HelloWorld.vue'));

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

And New File HelloWorld.vue :

<template>
  <div class="container">
    Hello Laravel + Vue!
  </div>
</template>

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

And welcome.blade.php :

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>Laravel</title>
    </head>
    <body>
        <div class="content">
            <div class="title m-b-md">
                <hello-world-component></hello-world-component>
            </div>
        </div>
    </body>
</html>

when i run this command,

sudo npm run dev

result :

DONE  Compiled successfully in 6224ms                                                                   7:16:51 AM
       Asset     Size  Chunks                    Chunk Names
  /js/app.js  1.38 MB       0  [emitted]  [big]  /js/app
/css/app.css   198 kB       0  [emitted]         /js/app

but when i connect my index page, not showing my HelloWorld.Vue code.

i have no idea what is problem?

Ashish · Accepted Answer · 2019-12-06 11:59:22Z

3

You need an element with id app to mount to. For example:

html

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

js

const app = new Vue({
  el: '#app',
  template: '<hello-world-component></hello-world-component>'
});

edited Dec 6, 2019 at 11:59

Ashish

6,9894 gold badges29 silver badges48 bronze badges

answered Nov 29, 2018 at 7:41

Brian Lee

18.3k3 gold badges45 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vernon Jian Hao · Accepted Answer · 2018-11-29 07:44:00Z

1

put an id="app" to your div

    <body>
        <div id="app" class="content">
            <div class="title m-b-md">
                <hello-world-component></hello-world-component>
            </div>
        </div>
    </body>

answered Nov 29, 2018 at 7:44

Vernon Jian Hao

866 bronze badges

Comments

Volod · Accepted Answer · 2018-11-29 07:48:41Z

1

As DigitalDrifter wrote add id="app" and also add path to your compiled js assets.

Something like this (better before </body> tag).

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

Messages in your console can also provide you with some clues for further debugging.

answered Nov 29, 2018 at 7:48

Volod

1,4572 gold badges19 silver badges35 bronze badges

Comments

Emtiaz Zahid · Accepted Answer · 2018-11-29 08:35:57Z

0

You did not added id app in your blade

also you did not included script file which is compiled

Update your blade

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>Laravel</title>
    </head>
    <body>
        <div class="content" id="app">
            <div class="title m-b-md">
                <hello-world-component></hello-world-component>
            </div>
        </div>
    </body>
<script src="{{ asset('js/app.js') }}"></script>
</html>

answered Nov 29, 2018 at 8:35

Emtiaz Zahid

2,8552 gold badges23 silver badges36 bronze badges

Collectives™ on Stack Overflow

Vue.js + Laravel5.7 'Hello World' Test not work

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related