93 comments found.
how are the vue-luma.esm.js & vue-luma.ssr.js build or comming togehter ? do i have to edit them ? i understand the base system but when changing values in home.vue like homeImage , they dont get reflected in the named files. maybe you could explain how to edit the right way / building the right way im unsing npm run dev at the moment
Sure,
Please give me a specific example of what you’re trying to change on the home page so I can give you instructions on how to achieve exactly that.
as in the question mentoined im trying to change the HomeImage of home.vue or generally how do i get changes refelected to the vue-luma.esm.js & vue-luma.ssr.js how are they build and comming together ?
all these questions where in the text above already !
Or do i have to edit home.vue and the other vue-luma.esm.js & vue-luma.ssr.js files would be a mess …
Hi Felix,
Sorry about that!
I’m around but mostly for critical issues. I’m officially starting work on Monday 11 Jan.
Regarding your question, the way you could edit the components:
From the terminal, go to the resources/vendor/vue-luma folder and create a local npm link:
cd resources/vendor/vue-lumaInstall dependencies:
npm installCreate a local link:
npm link
Then, from the root of the application (the main laravel app), instruct npm to use the link:
npm link vue-lumaThen, from the same resources/vendor/vue-luma folder you can run one of the two commands. To watch and recompile:
npm run watchOr to build:
npm run build
You may need to restart the main laravel app watcher before it picks up any changes in the resources/vendor/vue-luma folder.
npm run watch
Now you should be able to edit any .vue file in resources/vendor/vue-luma and you have a way of watching/building the thing, which should reflect on the main app.
Please let me know if you need further assistance, I’ll be arround this time.
Thanks!
Hi Felix,
Updated docs https://www.frontendmatter.com/product/luma-laravel/documentation/custom-components/ to include samples of extending the components locally and/or editing the source components workflow from the vue-luma package as described above.
Also, the latest v1.1.0 fixes the install/build issues, upgraded to laravel-mix v6, webpack v5, postcss v8 etc. The update is already available on the repository and should be available on Envato shortly.
Thanks!
Hi man, I have a question regarding the backend, Could you give some explanation to that? How can I write my website fully? Do you have any suggestions to write it?
Hi there, when I purchased VUE version I didn’t realize it has no backend at all, it is not a running system instead templates only. Does Laravel version has full backend logic with database? if so, could I swap my purchase with Laravel version?
Hi, we have the same problem: npm run prod:main: works and Compiled successfully !
npm run prod:css, returned errors On Ubuntu
Could you help with that?
Hi,
What is your npm and node version?
r00f@Programmer:/server$ npm -v 6.14.9 r00f@Programmer:/server$ node -v v14.15.3 r00f@Programmer:~/server$
It seems something may be wrong with postcss-rtl, could you please confirm by editing webpack.mix.css.js and comment out the following line:
// require('postcss-rtl')
Please let me know if the command succeeds after this and I’ll try to figure out how to solve it properly.
ERROR Failed to compile with 8 errors 12:23:49
error in ./resources/scss/app.scss
Module build failed (from ./node_modules/css-loader/index.js): ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js): Error: PostCSS plugin postcss-purgecss requires PostCSS 8.
and this error on web browser after php artisan serve
Exception Unable to locate Mix file: /css/app.css. (View: /home/r00f/server/resources/views/app.blade.php) http://localhost:8000/app/homeRight,
Also remove this part:
if (mix.inProduction()) {
postCss.push(
purgecss({
content: [
'./public/js/**/*.js',
],
variables: true,
keyframes: true,
fontFace: true,
safelist: {
greedy: [
/-(leave|enter|appear)(|-(to|from|active))$/,
/^(?!(|.*?:)cursor-move).+-move$/,
/^router-link(|-exact)-active$/,
/data-v-.*/,
/mdk-box--primary/,
/mdk-(drawer|reveal)/,
/sidebar-submenu/,
/sm-indent/,
/sidebar-(light|dark-pickled-bluewood)/,
/navbar-(light|dark-pickled-bluewood)/,
/avatar-.*/,
/btn-(flush|white|accent|dark|outline-(white|dark)|lg)/,
/badge-(accent|dark|notifications)/,
/text-rating/,
/pagination-xsm/,
/icon-holder--(primary|dark|light|outline-accent)/,
/bg-(body|secondary|success|danger|warning|info)/,
/alert-(success|danger|warning|info)/,
/spinner-grow/,
]
}
})
)
}
Let me know. Thanks!
so thanks for answer! after remove this code npm run prod:css was complied succesful but with warnings: WARNING Compiled with 8 warnings 12:59:43
warning in ./resources/scss/app.scssModule Warning (from ./node_modules/postcss-loader/src/index.js): Warning
(19913:3) start value has mixed support, consider using flex-start instead
@ ./resources/scss/app.scss 2:14-253and now php artisan serve – works and site works. now there is question – we need some new updated code from you or it is solution for now and i can build final site with this (in this time project is in my local PC i need upload it to hosting) ?
You can safely ignore the warnings. Yes you can build the site with this, it’s only an issue with a dev tool for generating RTL CSS, so it’s only an issue if you need RTL. I’ll post a fix for that as soon as I figure out what caused it
Ok, thanks for your support!
Hi, this delay in support is delaying the development of my project. I would like a faster support channel, the comments don’t seem like a good way to support me. in case we do not have this support in a suitable time, I will request a return.
Hi,
Haven’t heard back from your developer. Is everything ok? Please let me know if you still need assistance.
Thanks!
Please contact me , i would like to order a complete solution. Best wishes
what kind of support works with comments ?
@DEXLAB99 please add
Hi Felix,
Access granted!
You can reach me via email contact at frontendmatter dot com.
Thanks!
please give me access to Gitlab repository: @gcimoc
Access granted
user dorival008 is my developer.
Hi,
I apologize for the delay! Just replied to your developer directly, waiting to see if what I suggested resolves the issue.
Thank you!
Hi, I´m trying to install it on windows and get the following error when running npn run production:
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! luma-laravel@1.0.1 prod:main: `cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js -no-progress—hide-modules—config=node_modules/laravel-mix/setup/webpack.config.js “-env.mixfile=webpack.mix.css”`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the luma-laravel@1.0.1 prod:main script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Dorival\AppData\Roaming\npm-cache\_logs\2020-12-18T17_56_01_115Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! luma-laravel@1.0.1 prod:css: `npm run prod:main——env.mixfile=webpack.mix.css` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the luma-laravel@1.0.1 prod:css script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Dorival\AppData\Roaming\npm-cache\_logs\2020-12-18T17_56_01_221Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! luma-laravel@1.0.1 production: `npm run prod:main && npm run prod:css` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the luma-laravel@1.0.1 production script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Dorival\AppData\Roaming\npm-cache\_logs\2020-12-18T17_56_01_293Z-debug.log
Any help?
In browser I get this Laravel error: Unable to locate Mix file: /css/app.css. (View: C:\xampp\htdocs\conexao_caveira\cursos\resources\views\app.blade.php)
Hi,
I apologize for the delay!
Unfortunately, the error log from npm is not very helpful in providing the information of why it failed.
Can you please try running separately:npm run prod:mainThen run:
npm run prod:css
And let me know please if that worked! Thank you.
Hi, thank you for your answer, npm run prod:main: DONE Compiled successfully in 52946ms9:27:33
npm run prod:css, returned the following errors: > luma-laravel@1.0.1 prod:css C:\xampp\htdocs\conexao_caveira\cursos > npm run prod:main——env.mixfile=webpack.mix.css
> luma-laravel@1.0.1 prod:main C:\xampp\htdocs\conexao_caveira\cursos
> cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js -no-progress—hide-modules—config=node_modules/laravel-mix/setup/webpack.config.js “-env.mixfile=webpack.mix.css”
C:\xampp\htdocs\conexao_caveira\cursos\node_modules\webpack-cli\bin\cli.js:93 throw err; ^
TypeError: Cannot read property ‘unprefixed’ of undefined
at Object.<anonymous> (C:\xampp\htdocs\conexao_caveira\cursos\node_modules\postcss-rtl\lib\keyframes.js:5:35)
at Module._compile (C:\xampp\htdocs\conexao_caveira\cursos\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
at Module.load (internal/modules/cjs/loader.js:811:32)
at Function.Module._load (internal/modules/cjs/loader.js:723:14)
at Module.require (internal/modules/cjs/loader.js:848:19)
at require (C:\xampp\htdocs\conexao_caveira\cursos\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
at Object.<anonymous> (C:\xampp\htdocs\conexao_caveira\cursos\node_modules\postcss-rtl\lib\index.js:18:19)
at Module._compile (C:\xampp\htdocs\conexao_caveira\cursos\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
at Module.load (internal/modules/cjs/loader.js:811:32)
at Function.Module._load (internal/modules/cjs/loader.js:723:14)
at Module.require (internal/modules/cjs/loader.js:848:19)
at require (C:\xampp\htdocs\conexao_caveira\cursos\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
at Object.<anonymous> (C:\xampp\htdocs\conexao_caveira\cursos\webpack.mix.css.js:30:3)
at Module._compile (C:\xampp\htdocs\conexao_caveira\cursos\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
at Module.load (internal/modules/cjs/loader.js:811:32)
at Function.Module._load (internal/modules/cjs/loader.js:723:14)
at Module.require (internal/modules/cjs/loader.js:848:19)
at require (C:\xampp\htdocs\conexao_caveira\cursos\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
at Object.<anonymous> (C:\xampp\htdocs\conexao_caveira\cursos\node_modules\laravel-mix\setup\webpack.config.js:12:1)
at Module._compile (C:\xampp\htdocs\conexao_caveira\cursos\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
at Module.load (internal/modules/cjs/loader.js:811:32)
at Function.Module._load (internal/modules/cjs/loader.js:723:14)
at Module.require (internal/modules/cjs/loader.js:848:19)
at require (C:\xampp\htdocs\conexao_caveira\cursos\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
at WEBPACK_OPTIONS (C:\xampp\htdocs\conexao_caveira\cursos\node_modules\webpack-cli\bin\utils\convert-argv.js:114:13)
at requireConfig (C:\xampp\htdocs\conexao_caveira\cursos\node_modules\webpack-cli\bin\utils\convert-argv.js:116:6)
at C:\xampp\htdocs\conexao_caveira\cursos\node_modules\webpack-cli\bin\utils\convert-argv.js:123:17
at Array.forEach (<anonymous>)
at module.exports (C:\xampp\htdocs\conexao_caveira\cursos\node_modules\webpack-cli\bin\utils\convert-argv.js:121:15)
at C:\xampp\htdocs\conexao_caveira\cursos\node_modules\webpack-cli\bin\cli.js:71:45
at Object.parse (C:\xampp\htdocs\conexao_caveira\cursos\node_modules\webpack-cli\node_modules\yargs\yargs.js:576:18)
at C:\xampp\htdocs\conexao_caveira\cursos\node_modules\webpack-cli\bin\cli.js:49:8
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! luma-laravel@1.0.1 prod:main: `cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js -no-progress—hide-modules—config=node_modules/laravel-mix/setup/webpack.config.js “-env.mixfile=webpack.mix.css”`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the luma-laravel@1.0.1 prod:main script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Dorival\AppData\Roaming\npm-cache\_logs\2020-12-21T12_28_49_561Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! luma-laravel@1.0.1 prod:css: `npm run prod:main——env.mixfile=webpack.mix.css` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the luma-laravel@1.0.1 prod:css script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Dorival\AppData\Roaming\npm-cache\_logs\2020-12-21T12_28_49_630Z-debug.log
Hi,
What is your npm and node version?
It seems something may be wrong with postcss-rtl, could you please confirm by editing webpack.mix.css.js and comment out the following line:
// require('postcss-rtl')
Please let me know if the command succeeds after this and I’ll try to figure out how to solve it properly.
In addition to commenting out the require to postcss-rtl, you may also need to remove this part from the webpack.mix.css.js file:
if (mix.inProduction()) {
postCss.push(
purgecss({
content: [
'./public/js/**/*.js',
],
variables: true,
keyframes: true,
fontFace: true,
safelist: {
greedy: [
/-(leave|enter|appear)(|-(to|from|active))$/,
/^(?!(|.*?:)cursor-move).+-move$/,
/^router-link(|-exact)-active$/,
/data-v-.*/,
/mdk-box--primary/,
/mdk-(drawer|reveal)/,
/sidebar-submenu/,
/sm-indent/,
/sidebar-(light|dark-pickled-bluewood)/,
/navbar-(light|dark-pickled-bluewood)/,
/avatar-.*/,
/btn-(flush|white|accent|dark|outline-(white|dark)|lg)/,
/badge-(accent|dark|notifications)/,
/text-rating/,
/pagination-xsm/,
/icon-holder--(primary|dark|light|outline-accent)/,
/bg-(body|secondary|success|danger|warning|info)/,
/alert-(success|danger|warning|info)/,
/spinner-grow/,
]
}
})
)
}
Let me know if that worked. Thanks!
Hi, thank you very much, it worked fine. Any hint about translation, I see no documentation about that, any help will be great, as I need to translate it into Portuguese.
8 days ago I sent you the above question, is it too hard for you to take a few minutes to answer me? You always apologize for the delay, but keep on making the same mistake.
Hi,
Sorry about that!
I’m around but mostly for critical issues. I’m officially starting work on Monday 11 Jan.
Regarding your question, the way you could edit the components (and such, add translations):
From the terminal, go to the resources/vendor/vue-luma folder and create a local npm link:
cd resources/vendor/vue-lumaInstall dependencies:
npm installCreate a local link:
npm link
Then, from the root of the application (the main laravel app), instruct npm to use the link:
npm link vue-lumaThen, from the same resources/vendor/vue-luma folder you can run one of the two commands. To watch and recompile:
npm run watchOr to build:
npm run build
You may need to restart the main laravel app watcher before it picks up any changes in the resources/vendor/vue-luma folder.
npm run watch
Now you should be able to edit any .vue file in resources/vendor/vue-luma and you have a way of watching/building the thing, which should reflect on the main app.
Please let me know if you need further assistance.
Thanks!
Hello, skype? WhatsApp? I need support
Hi,
I apologize for the delay! Just replied to your developer directly, waiting to see if what I suggested resolves the issue.
Thank you!
Hi, I just purchased your theme, could you add me to the gitlab? My username is @Kalianey
Hi, Access granted!
::call_user_func_array vendor/laravel/framework/src/Illuminate/Routing/Controller.php:54 ```
Hi,
You need php 7.3 or newer.
That should fix the error.
Thanks!
Edit: Oh I see that Valet was not using the right version of php, I did valet use php@7.3 and it’s working now. Thanks!
Can I get the full error please so I can see the code line generating the error? After some googling it seems other are experiencing this after upgrading to php8.
All good now, thanks 
Hi,
This is not working for me. I have followed all the steps in the documentation on my windows machine. but the npm run dev is giving the following error:
> luma-laravel@1.0.1 production C:\Users\saman\production\katebmaktub > npm run prod:main && npm run prod:css
> luma-laravel@1.0.1 prod:main C:\Users\saman\production\katebmaktub > node node_modules/.bin/cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js—no-progress—hide-modules—config=node_modules/laravel-mi x/setup/webpack.config.js
C:\Users\saman\production\katebmaktub\node_modules\.bin\cross-env:2 basedir=$(dirname ”$(echo ”$0” | sed -e ’s,\\,/,g’)”) ^^^
SyntaxError: missing ) after argument list at wrapSafe (internal/modules/cjs/loader.js:1054:16) at Module._compile (internal/modules/cjs/loader.js:1102:27) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10) at Module.load (internal/modules/cjs/loader.js:986:32) at Function.Module._load (internal/modules/cjs/loader.js:879:14) at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) at internal/main/run_main_module.js:17:47 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! luma-laravel@1.0.1 prod:main: `node node_modules/.bin/cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js—no-progress—hide-mo dules—config=node_modules/laravel-mix/setup/webpack.config.js` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the luma-laravel@1.0.1 prod:main script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\saman\AppData\Roaming\npm-cache\_logs\2020-12-05T02_57_54_062Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! luma-laravel@1.0.1 production: `npm run prod:main && npm run prod:css` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the luma-laravel@1.0.1 production script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\saman\AppData\Roaming\npm-cache\_logs\2020-12-05T02_57_54_105Z-debug.log
Hi,
Please update the package.json and replace:
"dev:main": "node node_modules/.bin/cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "hot": "node node_modules/.bin/cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js", "prod:main": "node node_modules/.bin/cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",with
"dev:main": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js", "prod:main": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
Then try running the commands again.
Please let me know if that worked!
Thanks!
Hi,
When I purchased I didnt realize I had to use sqlite for my application. How can I move to mysql? What are the advantages of using sqlite over mysql?
Hi,
You don’t have to use sqlite, however it was the simplest form of getting started since it only requires a database/database.sqlite FILE.
There is no sqlite specific implementation, just a seeder for creating the demo user for authentication. You’re free to use any database driver supported by Laravel.
Thanks!
So basically no migrations for the other pages are created? i.e. for student courses or instructors and so on. To take the project further, we would have to develop the models, resources, controllers all ourselves?
I have misunderstood. If there is no work done on migrations, controllers etc in Laravel then can you swap this purchase with the HTML version https://www.lumalms.com/luma-bootstrap-html/?
It is easier for me to take html theme and then develop on laravel and vuejs on my own. Can I discuss this in via an email or private chat pls?
Any update on this please?
Done
Access granted!
Dear author:
Your template is fit to my need, but I want to ask about this template, Can this template install directly to my domain and work well or I need to make some logic code to all template?
I have little knowledge of programming, so I hope you can inform me about the way to use your template
best regards,
Hi I bought your code Luma Learning Laravel here the purchase code dad74281-8798-4037-8210-3ac25469eed7
I want to ask, how to install the npm in cpanel?
Exception The Mix manifest does not exist. (View: /home/mtyokesen/public_html/resources/views/app.blade.php)
Missing Mix Manifest File Did you forget to run npm install && npm run dev?
Hi,
You just have to run:
npm install
And then:
npm run production
The assets will get generated in public/.
there was an error
syntaxError: missing ) after argument list
Where are you getting this error, in the terminal when running the commands or in the browser console?
in the terminal when running command
Hi I bought this 1 month ago and still unable to install. Do you offer installation service?
Hi,
I apologize for the delay.
Can you please provide a full error log?
What are the differences in the Vue SPA in the Laravel bundle as compared to the Vue bundle?
Hi,
The UI is basically the same, however there are differences in the usage and project setup.
Both Nuxt and Laravel Vue versions are using the same UI Vue libraries, however there are differences in the usage and project setup, depending on whether you need a Nuxt.js project or a Laravel project.
Also, the Laravel stack includes several optimizations for Inertia.js, which is the glue between the UI and the backend.
The plan is to continue the development in slightly different directions with each item, with targeted features for the enviroments they are built for.
So for example, we may add direct backend functionality to the Laravel version while the other Vue versions may focus more on serverless features.
Also, happy to let you know the pure Vue.js version was submitted for approval on Envato, which you can see here: https://www.lumalms.com/luma-vue
Once it’s live, there will be a Purchase Button available. This particular setup is using Vue CLI as it’s backbone project structure, but still using the same UI packages, while being optimized for certain project types.
It really depends on what you need for your project.
Please add me to Gitlab Repo.
jmistani
thank you
Access granted
Please add me to the Gitlab Repository. I purchase from Elements.
My gitlab profile: https://gitlab.com/victorioustr
Access granted
When will the parent account be ready?
