38

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
No One
  • 553
  • 2
  • 9
  • 24
Ehab Talaat
  • 381
  • 1
  • 3
  • 5

9 Answers9

60

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 (scaled to practical software lifetime).

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

Community
  • 1
  • 1
Ognjen
  • 609
  • 6
  • 10
23

In laravel 8 project run following commands to install vue.js

  1. run composer require laravel/ui
  2. Install Vue php artisan ui vue
  3. Install Vue with auth php artisan ui vue --auth
  4. run npm install && npm run dev
DolDurma
  • 15,753
  • 51
  • 198
  • 377
qazisajjadakbar
  • 275
  • 2
  • 3
7

I wasted so much time with this and don't want people to go through the same, so I will teach you how to install Vue.js and make it work fast.

If you want to start from scratch

replace the LaravelProject with your project name

laravel new LaravelProject

Install Vue.js on your Laravel 8 application

run the following commands

composer require laravel/ui
php artisan ui vue
php artisan ui vue --auth
npm install 
npm run dev
npm run watch

Now that you have installed everything you need, go to a blade view and add the following code inside <body></body>

<div id="app">
  <example-component />
</div>
<script src="{{ mix('/js/app.js') }}"></script>

If you did everything right you will see the following text on the rendering of your view

Example Component
Im an example component.

And in your console: Component mounted.

Gass
  • 7,536
  • 3
  • 37
  • 41
2

Run a Command

npm install vue

In resources/js/bootstrap.js

window.Vue = require("vue/dist/vue.min");

And then run command

npm run dev
MOT EL
  • 182
  • 10
1

You can try npm install --save vue

Gary
  • 11
  • 1
1

You can install vue on laravel 8 by simply running below commands to install laravel ui:

composer require laravel/ui

And if you want authorizations such as login page, registartion page scaffolding then run below command from the folder where laravel project is installed:

php artisan ui vue

After running above commands run to install all dependencies and compile all style resources:

npm install
npm run dev
npm run watch
mk23
  • 1,257
  • 1
  • 12
  • 25
0

Setting up Vue in Laravel

  1. run composer require laravel/ui
  2. Install Vue php artisan ui vue
  3. if you Install Vue with auth use php artisan ui vue --auth
  4. add after in page master
  5. run npm install
  6. run npm run dev
  7. run PHP artisan serve
yassine dotma
  • 697
  • 8
  • 10
0

In existing project of Laravel 8 it's better to do this installation which gets in one line:

npm i -D vue@next @vue/compiler-sfc vue-loader@next

For your project to work correctly it's also important to check webpack.mix.js, it should look this way:

mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

As well while working with project don't forget:

npm run watch

Hope it was helpful!

Julia
  • 51
  • 1
  • 3
-1

**Install Vue + Laravel 8

composer create-project laravel/laravel projectName --prefer-dist

composer require laravel/ui

php artisan ui vue

npm install

npm run dev

npm i vue-loader

npm install vue-router vue-axios

npm run dev

Success.

TinhTN
  • 1
  • 2