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.json in Vue and place them into vue_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/media folder from Vue project into vue_laravel/public/ folder.

From public folder in vue project copy files listed below and paste them into public folder in Laravel folder.
> favicon.ico
> splash-screen.css

Copy vite variables from .env file in vue project and paste them to vue_laravel/.env and vue_laravel/.env.example files.

Create ts folder inside vue_laravel/resources/ts and inside this folder create file app.ts.

Copy src folder and paste it into vue_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 it app.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%22%20alt=%22Metronic%20logo" class="w-100" alt="">
 <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.

Lauris Stepanovs Author1 year ago

Vue Laravel

19 Answers

Replies (19)

Emeq BV 1 year ago

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

Lauris Stepanovs Author1 year ago

Hi,

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

Emeq BV 1 year ago

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-only

because 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 sad

. I've waited 1 week for the doc update, but it's still not complete and not working!!!

Lauris Stepanovs Author1 year ago

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

Emeq BV 1 year ago

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

 &acirc;&#158;&#156; Local: http://127.0.0.1:5173/
 &acirc;&#158;&#156; Network: use --host to expose

 LARAVEL v9.45.1 plugin v0.7.3

 &acirc;&#158;&#156; APP_URL: https://demo:8890

php artisan serve

INFO Server running on [http://127.0.0.1:8000]. 

 Press Ctrl+C to stop the server

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

Lauris Stepanovs Author1 year ago

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

Guest 1 year ago

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

Lauris Stepanovs Author1 year ago

Hi,

Could you please send us your error messages?

Regards,
Lauris Stepanovs,
Keenthemes Support Team

DSTC ZTH 1 year ago

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

Lauris Stepanovs Author1 year ago

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

Jonatan 1 year ago

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?

Lauris Stepanovs Author1 year ago

Hi Jonatan,

Are you getting those errors after running npm run dev command?

Regards,
Lauris Stepanovs,
Keenthemes Support Team

YKHLEF HAMZA 11 months ago

I just replace "@/": path.join(__dirname, "/resources/ts/src/"), by "@": path.join(__dirname, "/resources/ts/src/"), and its wor great :D

Lauris Stepanovs Author11 months ago

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

YKHLEF HAMZA 11 months ago

Hi,
No there is no problem
Thanks

Lauris Stepanovs Author11 months ago

Glad to hear that. All the best with your project!

Marcial Cahuaya 7 months ago

How do I use npm run build correctly?

Guest 4 months ago

I tried to do it with laravel 9 and metronic 8.2 (vue3)
but got this error

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

Guest 4 months ago

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

Metronic

Go to Metronic Downloads License Guide & FAQ Purchase Metronic Refunds

Laravel 9 (with Vite) and Vue 3 integration [For Metronic v8.1.6+]

Requirement

Create a new Laravel 9 project

Install dependencies

Prepare vue files and theme resources

Configure vite.config.js

Prepare app.blade.php

Run project

Replies (19)

Metronic

Products

Legal & Statements

Stay Connected

Templates byMetronic Creators

CreativeDesign Resources

We are proud towork with Experts

Laravel 9 (with Vite) and Vue 3 integration [For Metronic v8.1.6+]

Requirement

Create a new Laravel 9 project

Install dependencies

Prepare vue files and theme resources

Configure vite.config.js

Prepare app.blade.php

Run project

Replies (19)

Metronic

Templates by
Metronic Creators

Creative
Design Resources

We are proud to
work with Experts