DEV Community

Chloe
Chloe

Posted on

How to add Vue to a Laravel app?

#vue #laravel #help

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?

Top comments (3)

Collapse
 
kachidk profile image
Nwanguma Victor • • Edited

I thing you should uninstall everything about Vue you have installed manually.

All you need to do to get vue running is to make sure this is present. Mix will automatically install the required node modules.

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

And also make sure this is referenced in your app

<head>
    <!-- ... -->

    <script src="/js/app.js"></script>
</head>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
iamkarsoft profile image
Kofi A. •

welcome to the laravel community. I find using inertiajs inertiajs.com/ makes it easier to add vue for me.

Collapse
 
kachidk profile image
Nwanguma Victor •

And also welcome to the laravel community.
Check out Laracasts.
Ideally that should be where this kind of question should be.
Goodluck on your journey

Read next

kevinluo201 profile image

Use vite_rails to use Vue SFC(single file component, .vue) in >= Rails7

Kevin Luo -

biostate profile image

Throwing Success or Failure Notifications Manually in FilamentPHP Actions

Süleyman Özgür Özarpacı -

msnmongare profile image

How to Generate and Display Swagger (OpenAPI) Documentation for Your Laravel API

Sospeter Mong'are -

varzoeaa profile image

Laravel Nova vs Filament: The Best Admin Panels

varzoeaa -