How to Install Vue.js in Laravel 8

vue.js laravel-8
Ehab Talaat picture Ehab Talaat · Sep 11, 2020 · Viewed 29.3k times · Source

I am using laravel 8 and now I want install Vue.js. I am trying like this

  1. composer require laravel/ui
  2. php artisan ui vue
  3. php artisan ui vue --auth

Answer

Ognjen picture Ognjen · Sep 13, 2020

UPDATE: If you want to completely avoid Inertia / Livewire (Alpine.js) scaffolding in your Laravel ^8.0 applications and use Vue instead - install Laravel UI, which will most likely be maintained indefinitely.

Instructions for installing Vue (and old auth scaffolding) in your Laravel app:

  1. run composer require laravel/ui
  2. run php artisan ui vue for just installing Vue.
  3. run php artisan ui vue --auth for scaffolding out the auth views.
  4. run npm install && npm run dev

How ever, if you still want to use Vue.js with Livewire scaffolding, use the following instructions.

IMPORTANT: Please note that Vue.js takes control of the DOM once installed, detaching nodes and replacing it, removing other JS listeners. So, if you are using Livewire on the same page with Vue, the Alpine.js that comes with Livewire scaffolding wont work. As a workaround you can use Livewire VueJS support plugin.

  1. run npm install --save vue

  2. Add the following to your resources/js/app.js:

     window.Vue = require('vue');
 Vue.component('example-component', require('./components/ExampleComponent.vue').default);
 const app = new Vue({
   el: '#app',
 });

  3. Create an ExampleComponent.vue in the resources/js/components directory

    <template>
  <div>Hello World.</div>
</template>

<script>
  export default {
    mounted() {
      console.log("Example component mounted");
    }
  };
</script>

  4. Add <script src="{{ asset('js/app.js') }}" defer></script> in the <head> section of your layout file (resources/views/layouts/app.blade.php)

  5. Add id="app" to <body> or main <div> in your layout file (resources/views/layouts/app.blade.php)

  6. Add <example-component /> to your view

  7. Run npm run dev or npm run watch

  8. Finally, open up the devtools, and in the console log you should see Example component mounted

Related questions

How to disable input conditionally in vue.js

I have an input: <input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? '' : disabled"> and in my Vue.js component, I have: .. .. ready() { this.form.name = this.store.name; this.form.validated = …

Read More
forEach is not a function error with JavaScript array

I'm trying to make a simple loop: const parent = this.el.parentElement console.log(parent.children) parent.children.forEach(child => { console.log(child) }) But I get the following error: VM384:53 Uncaught TypeError: parent.children.forEach is not a function …

Read More
Can you force Vue.js to reload/re-render?

Just a quick question. Can you force Vue.js to reload/recalculate everything? If so, how?

Read More