383 comments found.
Hi, I’m having some Webpack related problems that I’m unsure how to solve.
The “AuthService” class works fine when you import it in a .vue file, like App.vue:
import AuthService from ’./auth/AuthService’; const auth = new AuthService(); const { login, logout, authenticated, authNotifier } = auth;
But if I want to add this to another JS file, like /api/index.js, like so:
import AuthService from ’../auth/AuthService’; const auth = new AuthService(); const { login, logout, authenticated, authNotifier } = auth;
I get the following error when calling “new” on the imported AuthService class.
Uncaught TypeError: auth_AuthService__WEBPACK_IMPORTED_MODULE_2_.default is not a constructor
at eval (index.js?365c:5)
at Module../src/api/index.js (app.js:17751)
at webpack_require (app.js:768)
at fn (app.js:131)
at eval (AuthService.js:9)
at Module../src/auth/AuthService.js (app.js:17851)
at webpack_require (app.js:768)
at fn (app.js:131)
at eval (cjs.js?./node_modules/vue-loader/lib/index.js?!./src/App.vue?vue&type=script&lang=js&:6)
at Module../node_modules/cache-loader/dist/cjs.js?
./node_modules/vue-loader/lib/index.js?!./src/App.vue?vue&type=script&lang=js& (app.js:2389)
How do I resolve this problem? Thanks.
A better example, illustrating my use case, is adding AuthService to the default.js router, so I can implement and guardRoute function that will ping the server to ensure the user is still logged in. If not, then kick them back out to the login page. But currently, that’s not possible, as I cannot import AuthService without seeing the “auth_AuthService__WEBPACK_IMPORTED_MODULE_2_.default is not a constructor” error mentioned above.
Hi,
You can create a separate index.js file for this below code but you have to import this file in App.vue file to make it work. For more details, please follow this documentation link: https://github.com/auth0-samples/auth0-vue-samples/tree/master/01-Login which may helps you.
import AuthService from ’../auth/AuthService’;
const auth = new AuthService();
const { login, logout, authenticated, authNotifier } = auth;
Thanks!
“You can create a separate index.js file for this below code but you have to import this file in App.vue file to make it work.”
Sorry, I’m not following. I don’t want to import AuthService into App.vue, that already is working today. I want to import AuthService in /src/router/default.js, where the routing happens.
Adding AuthService there throws the error: “auth_AuthService__WEBPACK_IMPORTED_MODULE_2_.default is not a constructor”
This appears to be an issue with how Webpack is configured.. but webpack is voodoo to me. Lol.
Yikes, after hours of messing this this, I finally figured it out:
// use same syntax as “helpers” import
import AuthService from ’../auth/AuthService’
// then perform new AuthService() with the function using the class, rather than within the file itself. I believe because it is a lazily loaded import, so you can’t use it immediately.
let guardRoute = function(to, from, next) { const auth = new AuthService(); const { login, logout, authenticated, authNotifier } = auth; ...
Hi my client bought this theme, and I trying to use it.
I have node version 9.11.2 and npm 5.6.0.
I have the theme version 4.3.0
After npm install in the folder vuely I use the command “npm run serve”
> vuely@4.3.0 serve /Users/martinez/Projetos/maxxidata/qion
> vue-cli-service serve
INFO Starting development server...
94% after seal
ERROR Failed to compile with 1 errors 14:29:31
error in ./src/router/index.js
Module parse failed: Unexpected token (11:9)
You may need an appropriate loader to handle this file type.
|
| var SignUpOne = function SignUpOne() {
> return import('Views/session/SignUpOne');
| };
|
@ ./src/main.js 38:0-30 52:0-6 75:0-6 137:10-16
@ multi (webpack)-dev-server/client?http://192.168.1.104:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
WAIT Compiling... 14:29:31
94% after seal
ERROR Failed to compile with 1 errors 14:29:33
error in ./src/router/index.js
Module parse failed: Unexpected token (11:9)
You may need an appropriate loader to handle this file type.
|
| var SignUpOne = function SignUpOne() {
> return import('Views/session/SignUpOne');
| };
|
@ ./src/main.js 38:0-30 52:0-6 75:0-6 137:10-16
@ multi (webpack)-dev-server/client?http://192.168.1.104:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
In this image you can see the error
https://pasteboard.co/I1BO2iV.png
In this image you can see my project folder where I copy the hidden file .babelrc from vuely-laravel folder to my vuely folder to avoid some module compilation erros.
https://pasteboard.co/I1BO2iV.png
And when I go to localhost:8080 i get blank page.
What did miss?
Thanks
Hy to resolve my problem I deleted package-lock.json file and node_modules folder, and run npm install babel-plugin-syntax-dynamic-import and npm install.
Hi good day My question is as follows, how can I make the lock screen functional after a few minutes that I stop using the app or manually with (a button in the template or with a keyboard shortcut) ... I am using laravel passport **
thanks for your help
This is a custom requirement, not covered under support, you can email us at support@theironnetwork.org if you wish to engage our development team. Thanks!
good day A guide on how to place the project in production on my server, proyecyo vue-laravel, a guide or a guided example to pass it to production mode
Hi,
Thanks for purchasing our template.
It depends on what server you have and what devop tools you are using to deploy your application on server so we are are providing some article and video links explaining the deploy process. 1.https://dev.to/asapabedi/deploying-laravel-5-applications-on-shared-hosting-without-the-use-of-ssh--16a6 2.https://www.youtube.com/watch?v=6g8G3YQtQt4
If you are facing any specific issue or need any help further you can send us an email at support@theironnetwork.org.
Thanks
Hi,
Thanks for great work,
I have a problem with the Vue compiler/Watch file, compile the file on typing, even if you type one letter, it consumes all the CPU and sometimes my mac hang 
Can I change the Webpack configuration to load files on save files not in typing?
Thanks, Ashraf Reda
Hi,
Thanks for purchasing our template.
Let us know if you have changed any settings such as webpack, vue.config.js etc. related to watch command so that we can check for the same.You can send us an email at support@theironnetwork.org with your webpack, vue.config.js file if you did any such changes.
Thanks.
Thanks, The issue was fixed by installing fsevents -npm install fsevents
good day A guide on how to place the project in production on my server, proyecyo vue-laravel, a guide or a guided example to pass it to production mode
Hi good day My question is as follows, how can I make the lock screen functional after a few minutes that I stop using the app or manually with (a button in the template or with a keyboard shortcut) ... I am using laravel passport **
thanks for your help
Hi again, how can I customize the bouncing rounded square that shows up when the app is loading?
Hi,
Please follow the below steps to customize the rotate-square loader:
To change its height and width go to location src>assets->scss->custom->_effect.scss and update its height, width according to your requirement as mentioned in given screenshot: https://tinyurl.com/y9dj9ol2
To change its color: Go to location src>assets->scss->custom->_common.scss and replace the variable with your required color as defined in this link: https://tinyurl.com/y8g9k8w4
Note: If you want to assign the color to the $success variable then go to location src->assets->scss->_app.variables.scss and assign your required color code as given in this link: https://tinyurl.com/yaw6xnec
Let us know if you need anything else.
Thanks!
How can I change the amount of time that the loader shows up? The perception is that the app takes a while to load due to the duration of that animation, which seems hard coded someplace. Thanks.
Hi
Go to location src->container, open each layout file and update the time of loader as mentioned in given screenshot for default layout: https://tinyurl.com/y3ocow6s
Let us know if you need anything else.
Thanks
I have not received an answer from you, via email?? please check!
hi , Using laravel there are two warnings on my screen as I can solve them.
It looks like you’re using the development build of the Firebase JS SDK. When deploying Firebase apps to production, it is advisable to only import the individual SDK components you intend to use.
For the module builds, these are available in the following manner (replace <PACKAGE> with the name of a component – i.e. auth, database, etc):
CommonJS Modules: const firebase = require(‘firebase/app’); require(‘firebase/<PACKAGE>’);
ES Modules: import firebase from ‘firebase/app’; import ‘firebase/<PACKAGE>’;
Typescript: import * as firebase from ‘firebase/app’; import ‘firebase/<PACKAGE>’;
(anonymous) @ main.js:1 r @ main.js:1 (anonymous) @ main.js:1 r @ main.js:1 (anonymous) @ main.js:1 r @ main.js:1 (anonymous) @ main.js:1 r @ main.js:1 (anonymous) @ main.js:1 r @ main.js:1 (anonymous) @ main.js:1 r @ main.js:1 (anonymous) @ main.js:1 r @ main.js:1 (anonymous) @ main.js:1 (anonymous) @ main.js:1 main.js:1 Add Dragula plugin: {}drake: proto: Object__proto__: constructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()defineGetter: ƒ defineGetter()defineSetter: ƒ defineSetter()lookupGetter: ƒ lookupGetter()lookupSetter: ƒ lookupSetter()get proto: ƒ proto()set proto: ƒ proto() main.js:1 [Vuetify] ‘default slot’ is deprecated, use ’:items and scoped slot “item”’ instead
found in
-> <VBreadcrumbs>
<AppCardContent>
<Fullscreen>
<AppCard>
<PageTitleBar>
<Anonymous>
<VContent>
<Anonymous>
<VApp>
<Anonymous>
<Root>
o @ main.js:1
s @ main.js:1
mounted @ main.js:1
Se @ main.js:1
insert @ main.js:1
T @ main.js:1
(anonymous) @ main.js:1
t._update @ main.js:1
Ie.before @ main.js:1
Ie.get @ main.js:1
Ie.run @ main.js:1
Oe @ main.js:1
(anonymous) @ main.js:1
Gt @ main.js:1
Promise.then (async)
Ht @ main.js:1
Jt @ main.js:1
(anonymous) @ main.js:1
Ie.update @ main.js:1
ut.notify @ main.js:1
set @ main.js:1
(anonymous) @ main.js:1
(anonymous) @ main.js:1
xt.updateRoute @ main.js:1
(anonymous) @ main.js:1
(anonymous) @ main.js:1
i @ main.js:1
i @ main.js:1
vt @ main.js:1
(anonymous) @ main.js:1
i @ main.js:1
(anonymous) @ main.js:1
(anonymous) @ main.js:1
(anonymous) @ main.js:1
(anonymous) @ main.js:1
Promise.then (async)
(anonymous) @ main.js:1
(anonymous) @ main.js:1
(anonymous) @ main.js:1
bt @ main.js:1
(anonymous) @ main.js:1
p @ main.js:1
i @ main.js:1
i @ main.js:1
i @ main.js:1
(anonymous) @ main.js:1
(anonymous) @ main.js:1
(anonymous) @ main.js:1
p @ main.js:1
i @ main.js:1
i @ main.js:1
vt @ main.js:1
xt.confirmTransition @ main.js:1
xt.transitionTo @ main.js:1
e.push @ main.js:1
jt.push @ main.js:1
y @ main.js:1
e @ main.js:1
e._withTask.r._withTask @ main.js:1
Hi,
Thanks for purchasing our template.
You can remove the firebase warning by following the steps below:
1.Go to location resources->js->store->modules->auth, open index.js file and update the line of code as mentioned in screenshot: https://tinyurl.com/y6vqgnl6 2.You have to update the same line of code in LoginOne.vue file which is under resources->js->views->session.
Other warning message occurs becuase of some modules functions deprecation, We are working on it and will update on themeforest soon.
Let us know if you need any help further.
Thanks!
Hi, I’m having trouble figuring out what icon libraries you used.
Your docs mention: http://zavoloklom.github.io/material-design-iconic-font/cheatsheet.html but when I try to use the names of these icons in a widget like “Notifications”, many don’t work.Can you provide me a link to what icons names/tags are available to use?
Hi,
here is an example:
1. Open File notification.vue and search icon field. Lets say you want to change the icon of following field.
icon: "notifications_active",2. Go to the icon library.and lets say we want skype icon at that field then click on skype icon one pop up will open and copy the following class from that code.and past at icon fieldicon: "zmdi-skype"3. Now save and check it. It will be solve now.
You can also use icon like following way.Let us know if you have any other queries.
Thanks,
Super helpful and thorough explanation. Thanks!
One follow up question: On that same Notifications page, when I choose an icon color, the color seems to be darkened by default when rendered.
ex.
_app.variables.scss $green: #88ee24 !default;
notifications: [
{
id: 1,
body: "Job created",
label: "Job",
time: "1 Hour Ago",
icon: "zmdi-layers",
iconColor: "green"
},Renders in color: #4CAE50
Screenshot: http://www.clipular.com/c/5585453009600512.png?k=ObNyJlvSct9CGvRd6XhMDewNRBkI want the color represented exactly as I define. How do I make that happen?
Hi,
The way you are defining variable is correct but $green variable already in use. Thats why it did not pick your color.
There are two methods:
1. Through variable and class.
a). Write you variable name as in example. Try to use different one because $green variable already in use.
$my-green:#88ee24;b). Make class like this:.my-green--text{
color: $my-green !important;
}c). Now if you will try to fill iconColor like:
https://screencast.com/t/1hFt814vObrYThen it will render your given color.2. By Giving color directly
There is another method that is easy to use.
Just add hex value of color into iconColor Fields. It will render your color. There is no need to define variable and creating class.
Hope this help you.
Thanks
“Make class like this:
.my-green—text{ color: $my-green !important; }”
Where should this go to allow for use across the entire app?
/src/assets/scss/utilities/_text.scss ?? Seems not.
“There is another method that is easy to use.
Just add hex value of color into iconColor Fields. It will render your color. There is no need to define variable and creating class.”
I prefer to maintain good code separation with all colors in the SCSS theme, rather than embedded in code.
It’s hard to figure out where the pre-defined SCSS variables come from.
For instance, if I use “blue” for the iconColor and inspect the page, I see: blue—text { color: #2196f3 !important; caret-color: #2196f3 !important; }
But if I search the codebase for “2196f3”, nothing comes up. So where is this value defined?
Hi,
To change the theme variable Go to src>theme> and open primaryTheme.js and change the variable according to your need. For more info check out the following link.
https://vuetifyjs.com/en/framework/themeWe used scss to making custom pages and section. Vuetify js not used the scss variable. They may provide in future because users requested this feature too. Check the following link.
https://github.com/vuetifyjs/vuetify/issues/2371Let us know if you have other queries.
Thanks
Thanks for the path in the code and the link to the Github issue. Seems something like: https://github.com/nmsmith22389/vuetify-scss might help.
Adding these vars to primaryTheme.js worked. Thanks!
When I click on plans top-header button, seems that sidebar behavior is not correct. It should auto-collapse that sidebar link.
Hi,
Please follow the instructions below to auto-collapse the sidebar link on plans button click:
1.Go to location src->components->Header->Header.vue and edit the line of code as mentioned in screenshot: https://tinyurl.com/y8who3ol 2.Then call method “sidebarPath” and add lines of code as given in screenshot: https://tinyurl.com/ydx972hh 3.After that go to location: src->store->modules->sidebar->index.js and add lines of code mentioned in screenshot: https://tinyurl.com/y8a92n2b
Let us know if it works.
Thanks
Could you make a short description, how to implement Amplify in project. It seems that you have change the standart way vue router works, so following any implementation tutorials doesn’t work… I can get the autorizer to work, but can’t get any router guard to work… ( i have tried 5 different tutorials )
Goodday,
I can’t install the Vuely theme. Steps to reproduce: 1) Install NPM and Node ( version node: 11.6.0 and NPM: 6.7.0) 2) Move folder “Vuely” to server 3) Run command “npm install” 4) errors: npm audit
=== npm audit security report ===┌──────────────────────────────────────────────────────────────────────────────┐ │ Manual Review │ │ Some vulnerabilities require your attention to resolve │ │ │ │ Visit https://go.npm.me/audit-guide for additional guidance │ └──────────────────────────────────────────────────────────────────────────────┘ ┌───────────────┬──────────────────────────────────────────────────────────────┐ │ Critical │ Command Injection │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Package │ growl │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Patched in │ >=1.10.2 │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Dependency of │ @vue/cli-plugin-e2e-nightwatch [dev] │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Path │ @vue/cli-plugin-e2e-nightwatch > nightwatch > │ │ │ mocha-nightwatch > growl │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ More info │ https://npmjs.com/advisories/146 │ └───────────────┴──────────────────────────────────────────────────────────────┘ ┌───────────────┬──────────────────────────────────────────────────────────────┐ │ High │ Denial of Service │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Package │ http-proxy-agent │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Patched in │ >=2.1.0 │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Dependency of │ @vue/cli-plugin-e2e-nightwatch [dev] │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Path │ @vue/cli-plugin-e2e-nightwatch > nightwatch > proxy-agent > │ │ │ http-proxy-agent │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ More info │ https://npmjs.com/advisories/607 │ └───────────────┴──────────────────────────────────────────────────────────────┘ ┌───────────────┬──────────────────────────────────────────────────────────────┐ │ High │ Denial of Service │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Package │ http-proxy-agent │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Patched in │ >=2.1.0 │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Dependency of │ @vue/cli-plugin-e2e-nightwatch [dev] │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Path │ @vue/cli-plugin-e2e-nightwatch > nightwatch > proxy-agent > │ │ │ pac-proxy-agent > http-proxy-agent │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ More info │ https://npmjs.com/advisories/607 │ └───────────────┴──────────────────────────────────────────────────────────────┘ ┌───────────────┬──────────────────────────────────────────────────────────────┐ │ High │ Denial of Service │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Package │ https-proxy-agent │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Patched in │ >=2.2.0 │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Dependency of │ @vue/cli-plugin-e2e-nightwatch [dev] │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Path │ @vue/cli-plugin-e2e-nightwatch > nightwatch > proxy-agent > │ │ │ https-proxy-agent │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ More info │ https://npmjs.com/advisories/593 │ └───────────────┴──────────────────────────────────────────────────────────────┘ ┌───────────────┬──────────────────────────────────────────────────────────────┐ │ High │ Denial of Service │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Package │ https-proxy-agent │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Patched in │ >=2.2.0 │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Dependency of │ @vue/cli-plugin-e2e-nightwatch [dev] │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Path │ @vue/cli-plugin-e2e-nightwatch > nightwatch > proxy-agent > │ │ │ pac-proxy-agent > https-proxy-agent │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ More info │ https://npmjs.com/advisories/593 │ └───────────────┴──────────────────────────────────────────────────────────────┘ ┌───────────────┬──────────────────────────────────────────────────────────────┐ │ Low │ Regular Expression Denial of Service │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Package │ debug │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Patched in │ >= 2.6.9 < 3.0.0 || >= 3.1.0 │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Dependency of │ @vue/cli-plugin-e2e-nightwatch [dev] │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ Path │ @vue/cli-plugin-e2e-nightwatch > nightwatch > │ │ │ mocha-nightwatch > debug │ ├───────────────┼──────────────────────────────────────────────────────────────┤ │ More info │ https://npmjs.com/advisories/534 │ └───────────────┴──────────────────────────────────────────────────────────────┘ found 6 vulnerabilities (1 low, 4 high, 1 critical) in 15791 scanned packages 6 vulnerabilities require manual review. See the full report for details.
I’ve manually deleted all these folders and replaced them with the current version, except it still doesn’t work.
Can you help me solve this?
Hi,
Our apologies for the late reply.
It seems the node version you are using is not compatible for core module. Please install stable version of nodejs. Check the following link.
https://nodejs.org/en/We recommended you to use v10.xx version.
After installing it remove node module folder and package-lock.json file and try to install npm again.
Let us know if you have other queries.
Thanks!
do you handle any example page of error 403 not authorized, to be able to be called depending on that error? I just need the visual part of the redirect I think I can solve it, with the push router
Hi,
Right now we dont have any example page for 403 or unauthorised users but you can follow the instructions below to add one on your app.
1.Create a new page for 403 error. 2.Defined in the routes to redirect to that page under location src->router->index.js 3.Go to location src->main.js and add your lines of code as mentioned in screenshot: https://tinyurl.com/yap2sx6q
Let us know if you need any help further.
Thanks
Great theme! Default animation in seed project, is the page fade in and slide up. How can i cange this to just fade in…
Hi,
Thanks for purchasing our template.
Follow the steps below to set fade-in as your default animation:
1. Go to location src->store->modules->settings->index.js and set the selectedRouterAnimation state to routerAnimations1 as defined in screenshot: https://tinyurl.com/ybha4bmm 2. Check the router animation values under location src->store->modules->settings->data.js as shown in screenshot https://tinyurl.com/y8hoe4vv and set it to selectedRouterAnimation state according to your requirement.
Let us know if you have any other query on need any help to setup the template.
Thanks
Perfect, thanks for fast reply 
hi, great theme, the vuetify parallax seems to be broken somehow it does not render well any clue ? i’m using the laravel integration of your theme
here is a snippet to test with: https://codepen.io/vwxyzjn/pen/gxzgaJi hope i get a reply some day
We are trying to integrate the same on our end, thats why it is taking bit of time, we will surely updated you once we figure out a proper solution. Thanks!
Hi, I hope you’re doing well. Thank you for your patience while we were working on your issue . Please try adding the following piece of code into your styles.
.app-default-layout,.app-default-layout .v-content__wrap { height: 100% !important; }
Let us know if it works.
Thanks
hello, thx for the feedback, the solution provided actualy works but is a lot glitchy.
For example there’s always a problem on page load. you only see part of the image or nothing at all, image shows up on scroll or when you click on the sticky app customizer.
in my opinion the theme need a dependencies update, i did update vuetify to 1.4.2 but i still have the same glitch
please advice on this thx
hello again, i don’t know where to find the the bug with vuetify parallax on your theme please help
Hi,
We got the issue you are referring to and working on to resolve it, We will release an updated stable version soon including this issue fixed.
Thanks
I’m installing the theme on an existing project and I’m wondering how to set the layout to rtl by default
Hi,
Thanks for purchasing our template.
To set the layout RTL by default, please follow the steps below:
1. Go to location src->store->modules->settings->index.js 2. Set the rtlLayout state to true. Here is the screenshot link: https://tinyurl.com/yd85mfdl
Let us know if you have any other query on need any help to setup the template.
Thanks
Hi do we get the static html files too in the laravel blades
Do you provide mockups? If yes, what format?
Hi,
Thanks for your interest in our template.
We do not provide exact mockup files but we have some drafts sketch files. Please send us your email id at support@theironnetwork.org after you purchase and we will send you a download link.
Thanks
