How do I set up Vue 3 + Laravel 8

user_13727744 0
Viewed 6419

I would like to use Vue 3 components/vue files within Blade Templates. I have been spending the whole day trying to get it working, so this is my last hope.I tried watching video tutorials, I tried reading the documentation, I have tried pretty much everything.

I first tried to install Vue using npm: npm install vue but I was told that wasn't enought; I had to use the Vue CLI in order to use components/.vue files as the CLI ships with all compilers and webpack configurations.

That's what I did:

npm install -g @vue/cli

But it didn't work, it gave me an error:

Vue command not found

So I tried using npx:

npx @vue/cli create myApp

That worked but it starts the server like a separated application, on a different url other than my Laravel app. I know that's the expected behavior and that's why I have been spending the whole day trying to find a solution.

I also tried laravel/ui but it doesn't seem to work in Laravel 8.

I tried to manually set up my Laravel+ Vue app but didn't work either:

mix.js('resources/assets/js/main.js', 'public/js');

Inside my main.js file

<script>
import {createApp} from 'vue';
import App from "./components/App.vue"
createApp(App).mount("#app");
</script>

It says that Vue could not be resolved.

My question is:

How do I use/call Vue components in my Blade Template? Any ideas will be welcome.

laravel vue.js webpack frontend
1 Answers

There's a couple options to integrate Vue with Laravel.

Option 1: Vue CLI Using VueCLI you will install a whole new Vue project (separated from Laravel proejct) that works better independently as a front end, and talks to your backend through something like an HTTP API made with Laravel.

Option 2: Laravel 8 Breeze + Inertia Breeze is the new UI package for Laravel 8 that uses Tailwind CSS. Inertia.js is a package to use Laravel server-side routing and controllers.

For installation run in your new Laravel project run:

composer require laravel/breeze --dev

php artisan breeze:install --inertia

npm install

npm run dev

php artisan migrate

Please refer to the Laravel docs about installation of these packages: https://laravel.com/docs/8.x/starter-kits#laravel-breeze-installation

Option 3: Laravel UI This package is still supported by Laravel 8. If you have a fresh installation of Laravel, just run:

composer require laravel/ui

Then run:

// Basic scaffolding
php artisan ui vue

// login / registration scaffolding
php artisan ui vue --auth

Please refer to the documentation in the GitHub repo: https://github.com/laravel/ui

user_147454070
Related