Vue + Laravel integration
Hi,
I'm purchased Metronic 8 and I'm following the steps in https://preview.keenthemes.com/metronic8/vue/docs/#/vue-laravel-integration. But by following these steps I couldn't get it working. Can you check if it's up to date or make some video on this topic?
Replies (5)
Hi,
Thank you for your feedback.
We checked our doc and some code previews are outdated. Follow the steps below to fix your integration.
- Use the actual tsconfig.json from vue demo root folder.
- 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/"),
},
},
});
Also, you can check our vue 3 + laravel 9 (with Vite) integration post:
https://devs.keenthemes.com/question/laravel-9-with-vite-vue-3-integration
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi,
Thanks for the quick reply. I'm using laravel 9 and vite. After searching further in the question I found the same post. I've followed it and it's working now, but I still have some questions:
1. When I run npm run dev and php artisan serve it's working, but I can't use this in production. So I have changed the vite.config.js to:
import path from 'path'
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue'
import laravel from 'laravel-vite-plugin';
export default defineConfig({
resolve: {
alias: [
{ find: '~bootstrap', replacement: path.resolve(__dirname,'node_modules/bootstrap')},
{ find: '@', replacement: path.resolve(__dirname,'resources/ts/src/') }
]
},
plugins: [
vue({
template: {
transformAssetUrls: {
base: 'plugin/',
includeAbsolute: false,
},
},
}),
laravel({
input: [
'resources/css/app.css',
'resources/ts/app.ts'
],
refresh: true,
}),
],
});Is this the correct way?
2. I have downloaded and integrated demo8, but where can I find the fonticon and splash-screen.css files, it's not in the downloaded zip? Now I'm getting console errors about those files.
3. How can I get the .env variables after running npm run build, because import.meta.env.VITE_APP_NAME is not working?
Hi,
- Your configuration looks fine. Did you have any errors in production?
- You can find fonticon folder and splash-screen.css in public/ folder.
import.meta.env.VITE_APP_NAMEshould work fine. Please make sure that you have included VITE_APP_NAME variable in your .env file.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Thanks, everything works fine, but it isn't there. There is only media folder, favicon.ico and index.html
Btw don't you have any laravel+vue starter template where it's already integrated including the migration files and auths etc.?
i've downloaded demo8 vue again, and there is no splash-screen.css and fonticon.css
