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
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"
npm install --save-dev @vitejs/plugin-vue
npm install
public
folder in vue project copy and paste the files and folder listed below..env
file in vue project and paste them to vue_laravel/.env
and vue_laravel/.env.example
files.src
folder and paste it into vue_laravel/resources/ts
.vue_laravel/resources/ts
and inside this folder create file app.ts.vue_laravel/resources/ts/app.ts
.import "./src/main";
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";
VUE_APP
environment variable names to VITE_APP
and replace usage from process.env
to import.meta.env
.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,
},
});
resources/views
. Let's call it app.blade.php
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" alt="Metronic logo" />
<span>Loading ...</span>
</div>
<!--end::Loading markup-->
@vite("resources/ts/app.ts")
</body>
</html>
routes/web.php
.Route::get("/", function () {
return view("app");
});
npm run dev
php artisan serve
app.blade.php
.[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. (/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)
{ find: "~bootstrap", replacement: path.resolve(__dirname,"node_modules/bootstrap")},
vite.config.js
to fix some issues for the production build. Could you please rerun the build command with the updated config?