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

Requirement

Metronic version before 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",
"vuex-module-decorators": "^1.2.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

From public folder in vue project copy and paste the files and folder listed below.

> fonticon
> media
> favicon.ico
> splash-screen.css

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

Copy src folder and paste it into vue_laravel/resources/ts.

Create ts folder inside vue_laravel/resources/ts and inside this folder create file app.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";
```

For Vite we need to do some global replacements.

In file vue_laravel/resources/ts/src/App.vue remove ~ aliase from style imports.

@import "bootstrap-icons/font/bootstrap-icons.css";
@import "apexcharts/dist/apexcharts.css";
@import "quill/dist/quill.snow.css";
@import "animate.css";
@import "sweetalert2/dist/sweetalert2.css";
@import "nouislider/distribute/nouislider.css";
@import "@fortawesome/fontawesome-free/css/all.min.css";
@import "socicon/css/socicon.css";
@import "line-awesome/dist/line-awesome/css/line-awesome.css";
@import "dropzone/dist/dropzone.css";
@import "@vueform/multiselect/themes/default.css";
@import "prism-themes/themes/prism-shades-of-purple.css";
@import "element-plus/dist/index.css";

Globally replace VUE_APP environment variable names to VITE_APP and replace usage from process.env to import.meta.env.

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({
 plugins: [
 vue({
 template: {
 transformAssetUrls: {
 includeAbsolute: false,
 },
 },
 }),
 laravel([
 "resources/css/app.css",
 "resources/ts/app.ts",
 ]),
 ],
 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="./fonticon/fonticon.css">
 <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

23 Answers

Replies (23)

Sean Author1 year ago

Great post! Thank you happy

Guest 1 year ago

Is it possible that there is a step that is missing here? I followed these directions exactly. When I go to the URL, I just get a logo and text that says loading. The URL now says: http://127.0.0.1:8000/#/sign-in but I can't get anywhere else. It didn't seem like vite was creating the assets but I am not sure. This was extremely helpful though. Thank you.

Lauris Stepanovs Author1 year ago

Hi,

Do you have any errors in your browser console?

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Guest 1 year ago

There are no errors.

Guest 1 year ago

I was able to get it working. In the code you posted for the app.blade.php file, the div is missing the id tag so the page was not loading. Do we need to do anything additional to get the api working? In previous documentation for vue + laravel integration it seems like localhost:8000/api should allow you to access the api, but in my console after signing in I am seeing a 404 error: POST http://127.0.0.1:8000/api/login 404 (Not Found)

wondering if i am missing something else? I did remove the # from the URLs so not sure if that is causing the issue.

Lauris Stepanovs Author1 year ago

Hi,

Thank you for your feedback.

We already updated code preview for app.blade.php.

You should be able to access an API without making any changes, if you are using our ApiService.ts to make an HTTP request then you just need to update VITE_API_URL in .env file. Also, make sure that you have registered all endpoints in your routes/api.php correctly https://laravel.com/docs/9.x/routing.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

jayce jess 1 year ago

Sorry but I don't understand the "replace use of process.env to import.meta.env" part, could you be please more specific. Thanks

Lauris Stepanovs Author1 year ago

Hi,

By default in our theme, we are using process.env.VARIABLE_NAME to access .env variables, but this will not work for Vite, one of the options to use .env variables in Vite project is import.meta.env.VARIABLE_NAME.

For this integration, you need to replace all process.env, you can use global replace functionality of your code editor to replace all process.env to import.meta.env.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Ahmad Rivaldi 1 year ago

hii i'am following ur step above but i got an error like this
vite version: vite/3.1.8
OS:Linux Mint 20.3 (una)
Laravel: 9.19

[sass] ENOENT: no such file or directory, open '/home/cmh-arv/Projects/laravel/ayaklinik/node_modules/bootstrap/scss/functions' â•· 17 â”‚ @import "~bootstrap/scss/functions"; â”‚ ^^^^^^^^^^^^^^^^^^^^^^^^^^^ â•µ resources/ts/src/assets/sass/_init.scss 17:9 @import resources/ts/src/assets/sass/plugins.scss 10:9 @import resources/ts/src/App.vue 18:9 root stylesheet 3:42:48 PM [vite] Internal server error: [sass] ENOENT: no such file or directory, open '/home/cmh-arv/Projects/laravel/ayaklinik/node_modules/bootstrap/scss/functions' â•· 17 â”‚ @import "~bootstrap/scss/functions"; â”‚ ^^^^^^^^^^^^^^^^^^^^^^^^^^^ â•µ resources/ts/src/assets/sass/_init.scss 17:9 @import resources/ts/src/assets/sass/plugins.scss 10:9 @import resources/ts/src/App.vue 18:9 root stylesheet Plugin: vite:css File: /home/cmh-arv/Projects/laravel/ayaklinik/resources/ts/src/assets/sass/_init.scss Error: ENOENT: no such file or directory, open '/home/cmh-arv/Projects/laravel/ayaklinik/node_modules/bootstrap/scss/functions' â•· 17 â”‚ @import "~bootstrap/scss/functions"; â”‚ ^^^^^^^^^^^^^^^^^^^^^^^^^^^ â•µ resources/ts/src/assets/sass/_init.scss 17:9 @import resources/ts/src/assets/sass/plugins.scss 10:9 @import resources/ts/src/App.vue 18:9 root stylesheet at Object.wrapException (/home/cmh-arv/Projects/laravel/ayaklinik/node_modules/sass/sass.dart.js:1247:17) at NodeImporter._handleImportResult$4 (/home/cmh-arv/Projects/laravel/ayaklinik/node_modules/sass/sass.dart.js:85811:17) at /home/cmh-arv/Projects/laravel/ayaklinik/node_modules/sass/sass.dart.js:85750:50 at _wrapJsFunctionForAsync_closure.$protected (/home/cmh-arv/Projects/laravel/ayaklinik/node_modules/sass/sass.dart.js:3738:15) at _wrapJsFunctionForAsync_closure.call$2 (/home/cmh-arv/Projects/laravel/ayaklinik/node_modules/sass/sass.dart.js:28402:12) at _awaitOnObject_closure.call$1 (/home/cmh-arv/Projects/laravel/ayaklinik/node_modules/sass/sass.dart.js:28390:32) at Object._rootRunUnary (/home/cmh-arv/Projects/laravel/ayaklinik/node_modules/sass/sass.dart.js:4113:18) at StaticClosure.<anonymous> (/home/cmh-arv/Projects/laravel/ayaklinik/node_modules/sass/sass.dart.js:99102:16) at _CustomZone.runUnary$2$2 (/home/cmh-arv/Projects/laravel/ayaklinik/node_modules/sass/sass.dart.js:29799:39) at _Future__propagateToListeners_handleValueCallback.call$0 (/home/cmh-arv/Projects/laravel/ayaklinik/node_modules/sass/sass.dart.js:28871:51)

Lauris Stepanovs Author1 year ago

Hi,

Have you included the following alias in your vite.config.js?

{ find: "~bootstrap", replacement: path.resolve(__dirname,"node_modules/bootstrap")},

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Ridhan S 1 year ago

hello i have error when i try to build for prod using "npm build"

[vite]: Rollup failed to resolve import "/media/auth/404-error.png" from "resources/ts/src/views/etc/Error404.vue".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`

can you share vite.config.js for build.rollupOptions.external wildcard for all external media/*?

Lauris Stepanovs Author1 year ago

Hi,

Sorry for the late reply.

By default, in our theme path is "media/auth/404-error.png", could you please try to use a path without "/"?

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Mohamed Medhat 1 year ago

I have the same issue
when I run npm build I get this error:
Unable to locate file in Vite manifest: resources/ts/app.ts.

if I change the path to resources/js/app.js in the app.blade file the dashboard freeze on splash screen and nothing else happen

Lauris Stepanovs Author1 year ago

Hi Mohamed,

We just updated vite.config.js to fix some issues for the production build. Could you please rerun the build command with the updated config?

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Alex Deslauriers 1 year ago

What version of metronic was this article written about? I am trying it with Metronic v8.1.5 and nothing works.

Lauris Stepanovs Author1 year ago

Hi,

The post should work for Metronic v8.1.5. Do you have any errors?

In Metornic v8.1.6 we migrated to Create-Vue app and started to use Vite, so this tutorial might not be valid anymore. We will revise it and fix it as soon as possible.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Alex Deslauriers 1 year ago

I get many errors, I dont know if its on my end but let me detail them to you.

First of all for step 2)

I get error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined@undefined
npm ERR! Found: @popperjs/core@2.11.5
npm ERR! node_modules/@popperjs/core
npm ERR! @popperjs/core@"2.11.5" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @popperjs/core@"^2.11.6" from bootstrap@5.2.2
npm ERR! node_modules/bootstrap
npm ERR! bootstrap@"5.2.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Thats the first error, I can get past this step by adding --force.

Same thing with npm install, I have to add --force.

In between step 4 and step 5 Im not sure if theres a step mission or if Im doing something wrong but there is no "src/App.vue" in the ts folder that we just created so Im assuming we are taking the "src" folder from the metronic package and copying it to the newly created "ts" folder?

Then after running php artisan serve I get

[plugin:vite:css] [sass] Can't find stylesheet to import.
â•·
17 â”‚ @import "~bootstrap/scss/functions";
â”‚ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
â•µ
resources/ts/src/assets/sass/_init.scss 17:9 @import
resources/ts/src/assets/sass/plugins.scss 10:9 @import
resources/ts/src/App.vue 18:9 root stylesheet
/Applications/XAMPP/xamppfiles/htdocs/vue_laravel/resources/ts/src/App.vue:55:9

Emeq BV 1 year ago

can you update this with the new version, v8.1.6?

yustian t 1 year ago

hi,

i got this error :
[plugin:vite:import-analysis] Failed to resolve import "./src/main" from "resources\ts\app.ts". Does the file exist?

can u help me?

Lauris Stepanovs Author1 year ago

Hi,

Could you please specify which Metronic version are you using?

Regards,
Lauris Stepanovs,
Keenthemes Support Team

yustian t 1 year ago

sorry, i m using v8.1.6, do u have tutorial for this version?

Lauris Stepanovs Author1 year ago

Hi,

We just added an updated post for Metronic v8.1.6+.
https://devs.keenthemes.com/question/laravel-9-vue-with-vite-integration-metronic-v816

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Md. Rejwan 3 months ago

When i run npm run dev, it gives me the following error:
10:39:25 AM [vite] Internal server error: Failed to resolve import "pinia" from "resources/ts/src/main.ts". Does the file exist?
Plugin: vite:import-analysis
File: /media/rejwan/Files of University/Nonditosoft/theme-integration-2/resources/ts/src/main.ts:2:28
1 | import { createApp } from "vue";
2 | import { createPinia } from "pinia";
| ^
3 | import { Tooltip } from "bootstrap";
4 | import App from "./App.vue";
at formatError (file:///media/rejwan/Files%20of%20University/Nonditosoft/theme-integration-2/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:63765:46)
at TransformContext.error (file:///media/rejwan/Files%20of%20University/Nonditosoft/theme-integration-2/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:63759:19)
at normalizeUrl (file:///media/rejwan/Files%20of%20University/Nonditosoft/theme-integration-2/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:62034:33)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async file:///media/rejwan/Files%20of%20University/Nonditosoft/theme-integration-2/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:62188:47
at async Promise.all (index 1)
at async TransformContext.transform (file:///media/rejwan/Files%20of%20University/Nonditosoft/theme-integration-2/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:62109:13)
at async Object.transform (file:///media/rejwan/Files%20of%20University/Nonditosoft/theme-integration-2/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:64060:30)
at async loadAndTransform (file:///media/rejwan/Files%20of%20University/Nonditosoft/theme-integration-2/node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:49741:29)
10:39:25 AM [vite] Pre-transform error: Failed to resolve import "pinia" from "resources/ts/src/main.ts". Does the file exist?
10:39:26 AM [vite] Pre-transform error: Failed to resolve import "vue-router" from "resources/ts/src/App.vue". Does the file exist?
10:39:26 AM [vite] Pre-transform error: [sass] Can't find stylesheet to import.
â•·
19 â”‚ @import "bootstrap/scss/functions";
â”‚ ^^^^^^^^^^^^^^^^^^^^^^^^^^
â•µ
resources/ts/src/assets/sass/_init.scss 19:9 @import
resources/ts/src/assets/sass/plugins.scss 10:9 @import
resources/ts/src/App.vue 21:9 root stylesheet
10:39:26 AM [vite] Pre-transform error: Failed to resolve import "vue-router" from "resources/ts/src/router/index.ts". Does the file exist?
10:39:26 AM [vite] Pre-transform error: Failed to resolve import "vue-i18n" from "resources/ts/src/core/plugins/i18n.ts". Does the file exist?
10:39:26 AM [vite] Pre-transform error: Failed to resolve import "prismjs/prism.js" from "resources/ts/src/core/plugins/prismjs.ts". Does the file exist?
10:39:26 AM [vite] Pre-transform error: Failed to resolve import "vue-inline-svg" from "resources/ts/src/core/plugins/inline-svg.ts". Does the file exist?
10:39:26 AM [vite] Pre-transform error: Failed to resolve import "vee-validate" from "resources/ts/src/core/plugins/vee-validate.ts". Does the file exist?
10:39:26 AM [vite] Pre-transform error: Failed to resolve import "vue3-apexcharts" from "resources/ts/src/core/plugins/apexcharts.ts". Does the file exist?
10:39:26 AM [vite] Pre-transform error: Failed to resolve import "vue-axios" from "resources/ts/src/core/services/ApiService.ts". Does the file exist?
10:39:27 AM [vite] Pre-transform error: Failed to resolve import "pinia" from "resources/ts/src/stores/config.ts". Does the file exist?
10:39:27 AM [vite] Pre-transform error: Failed to resolve import "pinia" from "resources/ts/src/stores/config.ts". Does the file exist? (x2)
10:39:27 AM [vite] Pre-transform error: Failed to resolve import "pinia" from "resources/ts/src/stores/theme.ts". Does the file exist?
10:39:27 AM [vite] Pre-transform error: Failed to resolve import "pinia" from "resources/ts/src/stores/body.ts". Does the file exist?
10:39:27 AM [vite] Pre-transform error: Failed to resolve import "pinia" from "resources/ts/src/stores/auth.ts". Does the file exist?
10:39:27 AM [vite] Pre-transform error: Failed to resolve import "pinia" from "resources/ts/src/stores/config.ts". Does the file exist?
10:39:27 AM [vite] Pre-transform error: Failed to resolve import "vue-axios" from "resources/ts/src/core/services/ApiService.ts". Does the file exist?
10:39:27 AM [vite] Pre-transform error: Failed to resolve import "pinia" from "resources/ts/src/stores/config.ts". Does the file exist?

Metronic

Go to Metronic Downloads License Guide & FAQ Purchase Metronic Refunds

Laravel 9 (with Vite) and Vue 3 integration [For Metronic versions before 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 (23)

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 versions before 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 (23)

Metronic

Templates by
Metronic Creators

Creative
Design Resources

We are proud to
work with Experts