VueJS not rendering template content

Question

I recently started converting my laravel 8 project to VueJS, but it does not seem to render it's template content. Well, i used the following commands to include basic structure of Vue: php artisan ui vue && npm install

app.js:

require('./bootstrap');

window.Vue = require('vue').default;

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

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

webpack.mix.js:

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

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

Main view:

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body id="app">
    <example-component></example-component>

    <script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
</body>
</html>

Npm build works well, there're no errors. But unfortunately, the templates content is not visible in the frontend. Everything I see is the vue-tag itself like:

Thanks in advance!

Does this answer your question? Laravel Vue You may need an appropriate loader to handle this file type, — Kamlesh Paul
– Kamlesh Paul, Commented Jan 25, 2021 at 11:15
window.Vue = require('vue').default; to window.Vue = require('vue') try this — Kamlesh Paul
– Kamlesh Paul, Commented Jan 25, 2021 at 11:53

Boussadjra Brahim · Accepted Answer · 2021-01-25 11:58:47Z

2

the root component shouldn't be mounted in body element, you've to do something like :

<body >
   <div id="app">
    <example-component></example-component>
  </div>
    <script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
</body>

and remove default from window.Vue = require('vue').default; :

require('./bootstrap');

window.Vue = require('vue');

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

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

edited Jan 25, 2021 at 11:58

answered Jan 25, 2021 at 11:18

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

Collectives™ on Stack Overflow

VueJS not rendering template content

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related