Laravel 9 (with Vite) and Vue 3 integration [For Metronic v8.1.6+]
Requirement
- Metronic version v8.1.6+
- PHP 8.1.9+
- Composer 2.4.1+
- Node 16.16.0+
Create a new Laravel 9 project
- In the beginning, we need to create a Laravel+Vue project (in this example, we will create a project named vue_laravel) by running a command.
composer create-project --prefer-dist laravel/laravel vue_laravel - Navigate to the newly created folder with the command below.
cd vue_laravel
Install dependencies
- Metronic 8 Vue theme already contains almost all required dependencies for this integration, to get started we can copy a list of "dependencies" from
package.jsonin Vue and place them intovue_laravel/package.json.
Also, include "devDependencies" listed below."array-sort": "^1.0.0",
"sass": "^1.44.0",
"sass-loader": "^12.4.0", - Let's install vue vite plugin.
npm install --save-dev @vitejs/plugin-vue - Install all dependencies by running the following command.
npm install
Prepare vue files and theme resources
- Copy
public/mediafolder from Vue project intovue_laravel/public/folder. - From
publicfolder in vue project copy files listed below and paste them intopublicfolder in Laravel folder.
> favicon.ico
> splash-screen.css - Copy vite variables from
.envfile in vue project and paste them tovue_laravel/.envandvue_laravel/.env.examplefiles. - Create ts folder inside
vue_laravel/resources/tsand inside this folder create fileapp.ts. - Copy
srcfolder and paste it intovue_laravel/resources/ts. - The main entry point of the vue project is main.ts, we need to import it in app.ts, copy import below and paste it to your
vue_laravel/resources/ts/app.ts.import "./src/main";
Configure vite.config.js
- Copy vite.js configuration below and paste it to your
vue_laravel/vite.config.js.import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";
import path from "path";
export default defineConfig({
base: "/",
plugins: [
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
laravel({
input: ["resources/css/app.css", "resources/js/app.js"],
refresh: true,
}),
],
resolve: {
alias: {
"@/": path.join(__dirname, "/resources/ts/src/"),
"~": path.join(__dirname, "/node_modules/"),
},
},
build: {
chunkSizeWarningLimit: 1600,
},
});
Prepare app.blade.php
- Now we can add a new file inside
resources/views. Let's call itapp.blade.php - Copy the code below and paste it to your
app.blade.php.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Metronic Vue and Laravel Starterkit</title>
<link rel="icon" href="./favicon.ico">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700">
<link rel="stylesheet" href="./splash-screen.css">
@vite("resources/css/app.css")
</head>
<body class="page-loading">
<!--begin::Theme mode setup on page load-->
<script>
if (document.documentElement) {
var defaultThemeMode = "system";
var name = document.body.getAttribute("data-kt-name");
var themeMode = localStorage.getItem("kt_" + (name ? name + "_" : "") + "theme_mode_value");
if (themeMode === null) {
if (defaultThemeMode === "system") {
themeMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
} else {
themeMode = defaultThemeMode;
}
}
document.documentElement.setAttribute("data-theme", themeMode);
}
</script>
<!--end::Theme mode setup on page load-->
<div id="app"></div>
<!--begin::Loading markup-->
<div class="splash-screen">
<img src="./media/logos/default-small.svg" alt="Metronic logo" />
<span>Loading ...</span>
</div>
<!--end::Loading markup-->
@vite("resources/ts/app.ts")
</body>
</html> - Now we can add a new route to file
routes/web.php.Route::get("/", function () {
return view("app");
});
Run project
- Firstly we need to build the client, let's run the command.
npm run dev - This command will build our js/css files and will listen for changes in our vue folder to hot-reload them. Keep client-server running.
- In another tab navigate the project and run laravel project with the command below.
php artisan serve - Wait for the app to display that it is running on http://127.0.0.1:8000 then open this URL in your browser.
Replies (19)
I tried to do it with laravel 9 and metronic 8.2 (vue3)
but got this error
<img src="https://i.ibb.co/98jmx5Q/Screenshot-2023-12-08-at-5-04-00-pm.png"/>
I have ran all those npm commands as well.
So, vue+laravel intregrated starter kit will never come? I think it has been 3 years now people have been asking for it.
I know we can do it manually but with that we miss so many things (this one even does not include bootstrap) causing lots of problems later wasting time of the people.
I think it is great theme and a million dollar theme with 100k+ downloads and making vue+laravel starter may not take some hours for the expert (you must have hundreds of them), still consumers are just asking and asking...Looking at many comments in themeforest and posts here I feel many customers must have been frustrated due to it.
I always feel like leaving and look for other more vue specific theme but again come back scared of losing the learning time and need to transfer apps which will need financial and time resources again (so huge time has been already invested customizing it)...so important lesson learned (delayed), if you are more specific to vue , go for vue specific theme (which supports laravel, most do now a days).
Another problem is: html version of the theme is best in the world but vue3 version do not have many of those features such as kanban, draggable etc etc.
Anyways don't feel anything would be done as it has been 3 years saying same thing but
Hope you can help to solve above problem.
Thanks
I have solved the issue after investigating the things for few hours and it is working but still I think the problem explained in second part is real.
I was using vuestore now seems like pinia is used so may be need to make changes to my app as well
How do I use npm run build correctly?
I just replace "@/": path.join(__dirname, "/resources/ts/src/"), by "@": path.join(__dirname, "/resources/ts/src/"), and its wor great :D
Hi,
Thank you for sharing your solution.
Both variants seem to be working fine, did you have any problems with the vite configuration shown in a post?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi,
No there is no problem
Thanks
Glad to hear that. All the best with your project!
I'm sure I followed the steps exactly as described above, but I'm having "404 (Not Found)" problems.
This is my console log when visiting http://localhost:8000
GET http://[::1]:5173/resources/js/core/plugins/i18n net::ERR_ABORTED 404 (Not Found) main.ts:8
GET http://[::1]:5173/resources/js/core/services/ApiService net::ERR_ABORTED 404 (Not Found) main.ts:9
GET http://[::1]:5173/resources/js/core/plugins/apexcharts net::ERR_ABORTED 404 (Not Found) main.ts:10
GET http://[::1]:5173/resources/js/core/plugins/inline-svg net::ERR_ABORTED 404 (Not Found) main.ts:11
GET http://[::1]:5173/resources/js/core/plugins/vee-validate net::ERR_ABORTED 404 (Not Found) main.ts:12
GET http://[::1]:5173/resources/js/core/plugins/keenthemes net::ERR_ABORTED 404 (Not Found) main.ts:13
GET http://[::1]:5173/resources/js/core/plugins/prismjs net::ERR_ABORTED 404 (Not Found) App.vue:3
GET http://[::1]:5173/resources/js/stores/config net::ERR_ABORTED 404 (Not Found) App.vue:4
GET http://[::1]:5173/resources/js/stores/theme net::ERR_ABORTED 404 (Not Found) App.vue:5
GET http://[::1]:5173/resources/js/stores/body net::ERR_ABORTED 404 (Not Found) App.vue:6
GET http://[::1]:5173/resources/js/core/helpers/config net::ERR_ABORTED 404 (Not Found) index.ts:5
GET http://[::1]:5173/resources/js/stores/auth net::ERR_ABORTED 404 (Not Found)What could be the problem?
Hi Jonatan,
Are you getting those errors after running npm run dev command?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hello, I followed all steps for laravel9 + metronic 8.1.7(vue, vite).
production build processed successfully.
But all images doesn't loaded correctly.
When I check the image's url, it just pointed '/build/media/***' folder.
Do you think "import.meta.env.BASE_URL" working on the production?
If it is working correctly, what is the reason can't load the media resources correctly?
Please give me answer for this issue
Hi,
Do you use the same Vite configuration in the post?
Make sure that you have set a base property in your vite.config.js.
base: "/",Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hello,
I have tried this solution with Metronic version 8.1.7 but it does not work. I have several errors with the imports, it seems that the alias does not pass? I don't know what is happening.
Can you help me to install Metronic 8.1.7 in laravel 9 with fast and Vue?
Thanks in advance, pray
Hi,
Could you please send us your error messages?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Well, I followed the steps and changed resources/js/app.js to resources/ts/app.ts. I had to install laravel-vite-plugin too. After doing this I run the command
npm run build-onlybecause npm run build wasn't working
transforming (1) resources/ts/app.tsERROR: "type-check" exited with 1.Finally it's working, but with a lot of console errors, because the assets are not found. e.g.:
- http://127.0.0.1:8000/assets/assets/LayoutService.73065d7f.js net::ERR_ABORTED 404 (Not Found)
- http://127.0.0.1:8000/assets/assets/SignIn.37bee318.js net::ERR_ABORTED 404 (Not Found)
- http://127.0.0.1:8000/assets/assets/assets.1bc0fb6f.js net::ERR_ABORTED 404 (Not Found)
- http://127.0.0.1:8000/assets/assets/sweetalert2.all.31f6258e.js net::ERR_ABORTED 404 (Not Found)
and many more...
Is it working on your side? Can you maybe create a video tutorial or just a simple starter kit with laravel vue? Chatting is taking to much time
. I've waited 1 week for the doc update, but it's still not complete and not working!!!During the testing, we didn't have these errors.
Did you include all of the devDependencies?
"devDependencies": {
"@vitejs/plugin-vue": "^4.0.0",
"array-sort": "^1.0.0",
"axios": "^1.1.2",
"laravel-vite-plugin": "^0.7.2",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"sass": "^1.44.0",
"sass-loader": "^12.4.0",
"vite": "^4.0.0"
}Regards,
Lauris Stepanovs,
Keenthemes Support Team
Yes, those packages are included. I'll write down step by step what I did:
1. Create a new Laravel 9 project
2. Install dependencies
3. Prepare vue files and theme resources
Copied public/media to public/assets/ and public (for to be sure). So now I have public/media and public/assets/media
4. Configure vite.config.js
export default defineConfig({
plugins: [
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
laravel({
input: ["resources/css/app.css", "resources/ts/app.ts"],
refresh: true,
}),
],
resolve: {
alias: {
"@/": path.join(__dirname, "/resources/ts/src/"),
"~": path.join(__dirname, "/node_modules/"),
},
},
build: {
chunkSizeWarningLimit: 3000,
},
});5. Prepare app.blade.php
6. Remove / from vue_laravel/resources/ts/src/core/helpers/assets.ts.
I have also added BASE_URL to .env; BASE_URL=BASE_URL=https://demo:8890
export const getIllustrationsPath = (illustrationName: string): string => {
const extension = illustrationName.substring(
illustrationName.lastIndexOf("."),
illustrationName.length
);
const illustration =
useThemeStore().mode == "dark"
? `${illustrationName.substring(
0,
illustrationName.lastIndexOf(".")
)}-dark`
: illustrationName.substring(0, illustrationName.lastIndexOf("."));
return (
import.meta.env.BASE_URL +
`media/illustrations/${illustrationsSet.value}/${illustration}${extension}`
);
};
export const getAssetPath = (path: string): string => {
return import.meta.env.BASE_URL + path;
};6. Run project
npm run dev
VITE v3.2.5 ready in 1084 ms
➜ Local: http://127.0.0.1:5173/
➜ Network: use --host to expose
LARAVEL v9.45.1 plugin v0.7.3
➜ APP_URL: https://demo:8890php artisan serve
INFO Server running on [http://127.0.0.1:8000].
Press Ctrl+C to stop the serverWhen I go to http://127.0.0.1:8000 or https://demo:8890 app is running, but media or icons are not loaded. I see many errors, e.g.:
- GET https://media/misc/auth-screens.png net::ERR_NAME_NOT_RESOLVED
- GET https://media/stock/600x400/img-20.jpg net::ERR_NAME_NOT_RESOLVED
Maybe it helps; I am working Mac with Mamp PRO.
Hi,
You need to remove BASE_URL property from your .env file. You overrided BASE_URL property, which refers to public folder by default.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi,
Thanks for the update.
I've a few questions about the vite config.
1. Why is base: "/assets" ? Probably when you npm run dev it will become http://127.0.0.1:8000/assets.
2. Why is inpunt resources/js/app.js and not resources/ts/app.ts
3. Can you also describe how to prepare the other files like .eslintrc.cjs and tsconfig.json?
Update
I've followed the steps and when I run 'npm run dev', I'm getting the following error:
failed to load config from ./vite.config.js
error when starting dev server:
Error: Cannot find module "laravel-vite-plugin"
Require stack:
- ./vite.config.js
- ./rijsoftware/node_modules/vite/dist/node/chunks/dep-5605cfa4.jsHi,
- If you want you can avoid this by removing the base path property from vite.config.js and then updating paths in file vue_laravel/resources/ts/src/core/helpers/assets.ts. For getIllustrationsPath and getAssetPath you will need to remove
/before media in a path otherwise you will have two slashes before the path and non of the media files will be found. - It was the default configuration code if you are planning to handle all your frontend with vue you can just remove this plugin from the list.
app.ts file is specified inside your view:@vite("resources/ts/app.ts") - I will add this to our backlog. For now to add eslint you can refer to https://gist.github.com/EmadAdly/b356690a4cb3b9a79d6757d5ebd6c93c
This package should be in the list of devDependencies by default, you should keep default devDependencies and add those I described in the post.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
