Issue with Laravel / Vue.js 3 / Typescript integration
Hello everyone,
I'm trying to fully integrate Metronic theme with Laravel / Vue.
My version of Laravel is 6 (6.20.11), a version of laravel-mix is latest version (6).
My current Metronic theme version is 8.
I've been following this part of documentation ( https://keenthemes.com/metronic/?page=docs§ion=vue-laravel-integration ) and trying to find various alternative solutions for this problem when everything is related to Typescript, like it is in my case.
At the end, it appears that everything works - it is successfully compiled on "npm run watch" command and console is not logging out any errors... But, I'm constantly getting empty white screen in browser, after many different attempts to fix the issue.
Part of my situation right now is that I need to keep a Laravel 6th version, even if I'm not so sure that it works so well well in combination with latest setup, Typescript (this is my first work with ts), Vue.js 3, and 6th version of laravel-mix. Maybe some other newest npm packages are making problems also.
I was trying some things which are maybe not so straight-forward...
Can you please help me with some additional info about this problem ?
Replies (5)
Hi,
You can check Metronic 8 Vue + Laravel integration doc.
https://preview.keenthemes.com/metronic8/vue/docs/#/vue-laravel-integration
In the doc, we were using a Laravel 8, but most of the steps must be the same for Laravel 6.
To integrate Metronic 8 Vue with Laravel 9 you can check our post.
https://devs.keenthemes.com/question/laravel-9-with-vite-vue-3-integration
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Thank you very much for info about new documentation for Laravel (version 8 or less).
Also, I had to add a laravel-mix dependency in package.json file, after adding all of other dependencies.
Also - there is a situation in webpack.mix.js file, when Typescript is used. The situation appears when we run "npm run dev" or "npm run watch" commands.
Compiling on "npm run dev" runs very slowly (endlessly).
If you have some info about this issue, please let me know, if possible.
Hi,
Could you please specify which node and npm versions are you using?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hello,
here they are:
node: 18.9.0
npm: 8.19.2
Hi,
Sorry for the late reply.
We reproduced this issue, to fix it you can do the following steps:
- Use the actual tsconfig.json from vue demo root folder. Typescript config in doc seems to be outdated.
- Update your webpack.mix.js as shown below.
const mix = require("laravel-mix");
const path = require("path");
mix.ts("resources/ts/app.ts", "public/js")
.vue({version: 3,})
.webpackConfig({
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader",
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/],
// For production mode change it to false
// It"s long but it checks types and generates definitions
transpileOnly: true
}
},
{
test: /.mjs$/i,
resolve: {
byDependency: { esm: { fullySpecified: false } },
},
},
],
},
resolve: {
alias: {
"@": path.resolve(__dirname, "resources/ts/src/"),
},
},
});
Regards,
Lauris Stepanovs,
Keenthemes Support Team
