7

How to add Vue to a Laravel app?

 2 years ago
source link: https://dev.to/cguttweb/how-to-add-vue-to-a-laravel-app-46j1
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
Chloe

Posted on Mar 18

How to add Vue to a Laravel app?

I know some Vue and I'm attempting to learn about Laravel how do I add Vue to a Laravel app? I've tried a couple of things on Stack Overflow and here yet regardless of what I try I can't get it to work.

I've tried this:

npm install vue

Enter fullscreen mode

Exit fullscreen mode

which install vue and I try create a component but I can't seem to get it to render I've tried adding <script src="{{ mix('js/app.js) }}"></script> to my blade file

and this:

php artisan ui vue

Enter fullscreen mode

Exit fullscreen mode

which creates the scaffold correctly it says to run npm install && npm run dev yet every time I do this it fails. I've added .vue to mix file so this is currently:

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

Enter fullscreen mode

Exit fullscreen mode

It says additional dependencies are needed:

Running: npm install vue-loader@^15.9.7 --save-dev --legacy-peer-deps.
Finished. Please run Mix again.

Then it just fails:

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev:
npm run development
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

How do I run Mix again? npm run dev, npm run hot both fail what am I doing wrong?


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK