Adding vue js to an almost production-ready Laravel application

Question

I have an almost production-ready Laravel application(V6). I am adding features but I would like to use Vue JS in adding some of those features. The application's front-end was implemented in bootstrap-UI. Can someone help me figure out how I can add Vue to the Laravel application? Thank you in advance for your help

Laravel 6 should come with Vue out of the box. Look in ```resources/assets/js/components/Example.vue``` — CUGreen, Jul 30 '20 at 05:47
@CUGreen, There's no assets folder. But I thought it depends on the UI someone chose while setting up. If I am not wrong? — Simon Angatia, Jul 30 '20 at 05:58

score 0 · Answer 1 · answered Jul 30 '20 at 05:51

0

I suggest reading the documentation about Laravel Mix. This is a front-end framework baked into the Laravel Framework.

https://laravel.com/docs/7.x/frontend#introduction

I would recommend that you first try this out in a dummy project or different GIT branch.

You can use the following command to generate a basic set-up:

php artisan ui vue

answered Jul 30 '20 at 05:51

Bastiaan Dewaele

154
6

I get this error when I run ```php artisan ui vue``` ``` ErrorException : copy(C:\xampp\htdocs\freelance\bet\Files\core\resources\sass/_variables.scss): failed to open stream: No such file or directory at C:\xampp\htdocs\freelance\bet\Files\core\vendor\laravel\ui\src\Presets\Bootstrap.php:4 ``` – Simon Angatia Jul 30 '20 at 07:46
I think you removed the original files that where located in the directory resources/sass. Laravel normally comes with a default installation of Bootstrap. Try running $ php artisan ui bootstrap – Bastiaan Dewaele Jul 30 '20 at 08:59
Same errorI created those directories but no difference – Simon Angatia Jul 30 '20 at 09:09
Hmm, I would suggest creating a separate ticket on Stack overflow for this issue. – Bastiaan Dewaele Jul 31 '20 at 08:30

score 0 · Accepted Answer · answered Jul 30 '20 at 14:01

I finally got it to work in several steps. First I installed Laravel UI composer require laravel/ui "^1.2" remember it is "1.2" because Laravel version is 6, 2.0 version will throw this error: How to solve problems while installing ui in laravel? Then I created the following folders and files(Only if they don't exist in your application in resources folder(resources/js/app.js,resources/sass/_variables.scss, and resources/sass/app.scss) as explained here: https://laravel-news.com/laravel-5-7-resources-directory-changes, [Note that this structure differs from version 7.] I then updated webpack.mix.js as follows:

let mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')


.sass('resources/sass/app.scss', 'public/css');

After that I ran php artisan ui vue that installed vue ui and I finally did npm i && npm run dev and thats all. In case sass-loader throws an error, uninstall and install version 7. That is if you are using Laravel V6 And that is it! Hope this helps someone who might encounter the same.

Adding vue js to an almost production-ready Laravel application

2 Answers2

Linked