Vue.js 3 + Laravel 9 SPA: CRUD with Auth

Install Laravel + Vue: Load First Vue.js Component

IMPORTANT UPDATE: since Laravel 9.19 in July 2022, the Vue + Laravel installation from this video would not work exactly the same.

Laravel has changed the asset bundling tool from Laravel Mix to Vite.

I decided not to re-shoot the full course because of that change, it would be a huge task. Instead, I wrote a free detailed step-by-step article on how to install Vue into Laravel now.

Please read that article for the installation, and then you can proceed with the next lesson of getting data into Vue from API.

The alternative option is to revert from the now-default Vite, back to Laravel Mix, manually, and then proceed with this course from the first lesson.

Also, I have a "general" video on my Youtube channel: Laravel 9.19: From Mix to Vite - What You Need To Know

If you have any questions about this, please comment on this lesson or email me personally

Commit for this lesson:


Hello professor, I installed it according to your course, so mine appears vite installed and not webpack.

found 0 vulnerabilities

dev vite

VITE v3.2.5 ready in 3110 ms

➜ Local: ➜ Network: use --host to expose

LARAVEL v9.43.0 plugin v0.7.1

➜ APP_URL: http://localhost


Yes, since the launch of this course in Laravel 9.19 there was a change from Webpack to Vite, I didn't reshoot the full course for this.

There's a separate mini-course for this:


Another question, about laravel health, I didn't find in its documentation informing about pinging IP directly, is there anything to do regarding this that you already did?.


Laravel health and pinging IP directly? Pinging for what? You mean ping the server to check if it's active? I never really did it but there are plenty of external services to do it, like Oh Dear by Spatie, and others.


Hi, laravel: 9.48 Vite: 4.0.4, but I got the error: Internal server error: Failed to resolve import "./components/Posts/Index" from "resources/js/app.js". Does the file exist?


Specify the file as Index.vue and not just Index, that should help


Same error Internal server error: Failed to resolve import "./components/Posts/Index" from "resources/js/app.js". Does the file exist? I specify Index.vue but not solve


@Zain, hard to debug it for you. Can you check and compare your code with the repository attached to the course?


This code is not working with Vite but is working with Laravel Mix.


Right, I see. I'm planning to re-shoot this course when Laravel 10 comes out, some time in 2023, with Vite.


If someone still has this problem while using Vite and Vue v3, don't forget to install the plugin vite-plugin-vue and modify the vite.config.js file.

I have not found a configuration to load components without extension, but just adding the extension to the import line is working fine.

In vite.config.js

import vue from '@vitejs/plugin-vue'; // Add this import

plugins: [
	vue(), // Call it

In resources/app.js

import PostsIndex from "./components/Posts/Index.vue"; // Just add the extension
Ayenan Alphonse SOSSOU

I got shocked when I see you using webpack in this course after I have paid. My intention is to learn new things here, laravel vite vue 3 application, not laravel mix vue stuff. Anyway I will soon find my way out.


Sorry for this, I have the UPDATED course in text form, here:


i found a solution :

composer create-project laravel/laravel="^9.2" vue3-course


cd vue3-course

remove vite file create webpack.mix.js check this page :,revert%20back%20to%20Laravel%20Mix.&text=That%20should%20be%20it.,etc.%20to%20use%20Laravel%20Mix.

after that in layout.blade.php replace the following


AND : <script src="{{ asset('js/app.js') }}" defer></script>

To add vue js we have to add id="app" in layout/app.blade.php ans the remove alpine in resources/js/app.js and remove it in package.json and

npm install vue@3 && npm install vue-loader@3

and open the webpack.mix.js and add : .vue() //to compile it with the mix


The way you injected the vue post index inside dashboard page did not show the component content for me. Iam using laravel 10 and vite instead of webpack, and it's config as follow:

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
    plugins: [
            input: ["resources/css/app.css", "resources/js/app.js"],
            refresh: true,

and app.js as follow:

import "./bootstrap";
import { createApp } from "vue";

import PostIndex from "./components/back/Products/index.vue";
import Alpine from "alpinejs";

window.Alpine = Alpine;


const app = createApp({});
app.component("products-index", PostIndex);