Courses

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 povilas@laraveldaily.com

Commit for this lesson: https://github.com/LaravelDaily/Laravel-Vue3-CRUD-Course-2022/commit/6886baae1371015f50d91fbb15c508a218335327

Previous: What's Inside The Course Next Lesson: npm run watch: Re-Compiling JS and Tailwind
Login or register to comment or ask questions
avatar
Jean A. Silva

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: http://127.0.0.1:5173/ ➜ Network: use --host to expose

LARAVEL v9.43.0 plugin v0.7.1

➜ APP_URL: http://localhost

avatar
Povilas Korop

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: https://laraveldaily.teachable.com/p/laravel-9-vite-vue-react

avatar
Jean A. Silva

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?.

avatar
Povilas Korop

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.

avatar
MD

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?

avatar
Povilas Korop

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

avatar
Zain Amin

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

avatar
Povilas Korop

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

avatar
Zain Amin

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

avatar
Povilas Korop

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

avatar
Marrio

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
	laravel...
]

In resources/app.js

import PostsIndex from "./components/Posts/Index.vue"; // Just add the extension
avatar
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.

avatar
Povilas Korop

Sorry for this, I have the UPDATED course in text form, here: https://laraveldaily.com/course/vue-laravel-vite-spa-crud

avatar
Jemmeli Nejmeddine

i found a solution :

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

and

cd vue3-course

remove vite file create webpack.mix.js check this page : https://medium.com/@danrovito/replace-vite-with-mix-in-laravel-9-2-ce994fdb2253#:~:text=If%20you%20are%20starting%20a,revert%20back%20to%20Laravel%20Mix.&text=That%20should%20be%20it.,etc.%20to%20use%20Laravel%20Mix.

after that in layout.blade.php replace the following

BY:

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

avatar
Tholfikar

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: [
        vue(),
        laravel({
            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;

Alpine.start();

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