Stop Vue Components being render in Laravel

Question

I have fresh installed Laravel application also I installed npm, now every page I try to load this file will load instead ExampleComponent.vue

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

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

ExampleComponent.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>

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

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

Question

As I don't have plan to use VueJs and I also need to see my actual pages that I'm created, how I stop VueJs of being render in my application?

Answer 1

In your app.js remove everything after the bootstrap include, then recompile using npm run dev .

However, by default Laravel does nothing with Vuejs. Because it has no html elements on the page with id #app . Check your resources/views directory, the default blade file is welcome.blade.php .

To be exact about the flow:

• your routes file indicates how to handle requests and to which controller
• the controller responsible for the route will (probably) serve a blade view
• the blade view will be parsed, if it has an #app element and app.js binds Vue to #app Vue will take over.

https://github.com/laravel/laravel/blob/master/resources/views/welcome.blade.php

Answer 2

If you are not using vue.js, you may safely remove the #app div tag from your blade. Also, dont forget to remove the script to load app.js . This script is unnecessary and since it is mainly used when you're working with vue.js only.

So now, you will be working with normal php file (powered with blade syntax).

Hope this helps.