Installing vue.js in Laravel 8


If you are using Laravel 8 PHP framework and want to install Vue.js here is how you can do it.

  1. Run command: npm install --save vue
  2. Add below to resources/js/app.js:
    window.Vue = require('vue');
     Vue.component('example-component', require('./components/VueComponent.vue').default);
     const app = new Vue({
       el: '#app',
     });
  3. Create your component: VueComponent.vue
    <template>
      <div>Testing vue with Laravel 8</div>
    </template>
    <script>
      export default {
        mounted() {
          console.log("Testing vue with Laravel 8");
        }};
    </script>
  4. In the head section of resources/views/layouts/app.blade.php add <script src="{{ asset('js/app.js') }}" defer></script> and add id="app" to <body>
  5. Add or main
    in your layout file (resources/views/layouts/app.blade.php)
  6. Add <example-component /> to your view
  7. Now runnpm run dev, in devtools you should see the console log.