CODEWITHSUNDEEP
javascriptlaravelvue.js
Pinnokkio
Pinnokkio

Reputation: 549

VueJS not rendering template content

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:

enter image description here

Thanks in advance!

Upvotes: 0

Views: 627

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

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

Upvotes: 2

Related Questions