How to Install Vue.js in Laravel 8

Question

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

composer require laravel/ui
php artisan ui vue
php artisan ui vue --auth

youtu.be/S9tM2fUyluk watch video here

Shailesh Ladumor
– Shailesh Ladumor

2023-09-13 02:45:41 +00:00
Commented Sep 13, 2023 at 2:45 — Shailesh Ladumor
– Shailesh Ladumor, Commented Sep 13, 2023 at 2:45

Community · Accepted Answer · 2021-11-10 10:27:03Z

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:

run composer require laravel/ui
run php artisan ui vue for just installing Vue.
run php artisan ui vue --auth for scaffolding out the auth views.
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.

run npm install --save vue

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

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>

Add <script src="{{ asset('js/app.js') }}" defer></script> in the <head> section of your layout file (resources/views/layouts/app.blade.php)
Add id="app" to <body> or main <div> in your layout file (resources/views/layouts/app.blade.php)
Add <example-component /> to your view
Run npm run dev or npm run watch
Finally, open up the devtools, and in the console log you should see Example component mounted

DolDurma · Accepted Answer · 2021-03-11 13:29:25Z

23

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

run composer require laravel/ui
Install Vue php artisan ui vue
Install Vue with auth php artisan ui vue --auth
run npm install && npm run dev

edited Mar 11, 2021 at 13:29

DolDurma

17.6k58 gold badges223 silver badges427 bronze badges

answered Nov 20, 2020 at 13:13

qazisajjadakbar

2752 silver badges3 bronze badges

Comments

Gass · Accepted Answer · 2021-08-01 12:39:54Z

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.

edited Aug 1, 2021 at 12:39

answered Aug 1, 2021 at 12:15

Gass

9,6405 gold badges47 silver badges53 bronze badges

1 Comment

Nathan Stanford Over a year ago

If I do this I don't need user auth as I am doing this another way just don't run the 'php artisan ui vue --auth' correct?

MOT EL · Accepted Answer · 2021-09-01 03:18:21Z

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

answered Sep 1, 2021 at 3:18

MOT EL

19210 bronze badges

Comments

Gary · Accepted Answer · 2020-09-12 10:08:40Z

1

You can try npm install --save vue

answered Sep 12, 2020 at 10:08

Gary

111 bronze badge

1 Comment

Ehab Talaat Over a year ago

ok thank you and i can use vue instead of livewire right?

mk23 · Accepted Answer · 2021-06-11 00:48:59Z

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

answered Jun 11, 2021 at 0:48

mk23

1,4131 gold badge14 silver badges27 bronze badges

Comments

yassine dotma · Accepted Answer · 2021-04-30 11:14:45Z

0

Setting up Vue in Laravel

run composer require laravel/ui
Install Vue php artisan ui vue
if you Install Vue with auth use php artisan ui vue --auth
add after in page master
run npm install
run npm run dev
run PHP artisan serve

answered Apr 30, 2021 at 11:14

yassine dotma

8059 silver badges11 bronze badges

Comments

Julia · Accepted Answer · 2021-11-04 10:24:10Z

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!

answered Nov 4, 2021 at 10:24

Julia

611 silver badge3 bronze badges

Comments

TinhTN · Accepted Answer · 2021-11-10 04:07:33Z

-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.

edited Nov 10, 2021 at 4:07

answered Nov 10, 2021 at 4:01

TinhTN

12 bronze badges

Collectives™ on Stack Overflow

How to Install Vue.js in Laravel 8

9 Answers 9

Comments

Comments

If you want to start from scratch

Install Vue.js on your Laravel 8 application

1 Comment

Comments

1 Comment

Comments

Comments

Comments

**Install Vue + Laravel 8

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

Comments

Comments

If you want to start from scratch

Install Vue.js on your Laravel 8 application

1 Comment

Comments

1 Comment

Comments

Comments

Comments

**Install Vue + Laravel 8

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related