94 comments found.
Hello, I bought a paid template for the first time. I’d like to apply the template to the new project. Should I install “npm install” from the sekleton folder and work on that folder? I want to know how to create a new folder with the “vue create” command and apply the template to that project.
Hey suredatalab,
Thanks for writing to us. Here is the documentation: https://vuse-documention.hexesis.com/introduction
You might also received the documentation as part of Download bundle.
“Vue create” command is used to create a new setup.
We are providing complete ready setup with different components, layout, pages, widgets and much more as a theme.
You can quick start your project using this theme.
Hope this help you!!
Feel free to write us if you’re still facing any difficulties after reading document. We will be happy to assist you.
— Best Regards, Mia
Hi hexesis, I love this theme since had the first sight. But it seems the vuetify is not uptodate. I tried update it locally but there are some warnings appears that I can’t solve myself. Is there any plan to upgrade all the deps in recent future?
Hello ttoommbb,
Thanks for writing to us and being valuable customer!!
Vuse Admin comes with Vuetify 2.3.2 and latest version of Vuetify is 2.3.19. We have plan for upgrading versions but that would take time.
Vuetify is the team which keeps updating it once/twice in a month for different new features, deprecating existing component name/its usage, etc … Keeping up to date that frequently is quite difficult. We used to upgrade Vuetify with major releases with new designs, features and standards.
However we have noted your request and will try to put that into action ASAP as per our plans.
— Regards, Mia
Hi, it seems such an awesome work
But do this included any sketch file i.e XD, Figma, etc?
Hey there,
Thank you for writing to us.
Unfortunately, we don’t provide XD or Sketch file.
Feel free to write us if you have any questions.
— Regards, Jack
{{ $t(‘homepage.subtitle’) }}
I have it properly in the json. I tried adding pluginOptions: { i18n: { locale: ‘en’, fallbackLocale: ‘en’, localeDir: ‘locales’, enableInSFC: true } }to the vue.config.js file and it broke due to being depreciated through webpack.
What would you suggest would be the best way to build on your translation layout to add full site translations like this. This is my first vue project and I’m trying to work my way through all of this. Thank you so much for a great template to start with.
Jason
I just have seen your message to ElPodge above. I am going to try those steps and see if it will work for me as well. Thank you.
Yeah, that didn’t work for me. Like I said, new to all of this. Apparently I missed something to do with where to put the json file. any help is appreciated. Thanks in advance
Hey there,
Thanks for writing to us and being valuable customer to us.
Here is the quick reference of the document: https://vuse-documention.hexesis.com/internationalization https://github.com/mashpie/i18n-node#usage https://vuetifyjs.com/en/features/internationalization/#vue-i18nI would request to understand how i18n works in general.
You should not put en.json at locale/en/ as such we already have different categories and translation within it.
Example: If you want to add validations with i18n. I suggest to create locale/en/validations/message .json
Now question comes: how to use it ? Answer is
$t('Validations.Messages.email.valid')
Even though, if you refer locale/en/vuse/AppDrawer.json We have translated string with:
$t(`Vuse.AppDrawer.${item.i18n}`)
Where ${item.i18n} refers to dynamic key name from locale/en/vuse/AppDrawer.json.
You need not modify vue.config.js for i18n.
If you see – src/plugins/vuetify.js we have that config over there itself.
Hope this would be helpful to you.
Feel free to write us back on hexesist@gmail.com if you need more assistance.
— Best Regards, Mia
Thank you Mia! I did review the documents you linked as well as looked at how you have coded the appDrawer and how you use it. That makes a lot more sense now on how it works with Vuse. As well as, I have added test validation method based on what you said and it works. The official doc didn’t help much because it shows different methods (inline, js) but I sort of understood that. My biggest issue I deduced from those examples and your code. Here’s what I did: Home.vue Has a “h4” a “p”. I removed the text from h4 and p and placed them in json file in Lang>en>Pages>Home.json and Lang>it>Pages>Home.json.
{ “subtitle”: “subtitle text”, “paragraph”: “paragraph text here” }
Under i18n>languages.json I added { “name”: “Italian”, “locale”: “it”, “alternate”: “it”, “country”: “it” },
Under i18n>index.js I added >> import it from ”@/lang/it”; and added ‘it’ (without quotes) to globalLanguages
on Home.vue I replaced the h4 subtitle text with {{ $t(‘Pages.Home.subtitle’) }} and the p with {{ $t(‘Pages.Home.paragraph’) }}. Works like a charm! Thanks again and I hope this helps some other beginner like me one day as well.
Hey Jdlong27,
Thanks for writing back and happy to see that it works for you.
We observed that our customer is facing difficulties with i18n implementation . Hence, we are planning to prepare some quick guide videos for smooth onboarding.
We are so lucky and blessed that we have all very nice, positive and polite customers which came back to us with issue and allow us make ourselves more better on each experience .
Much Appreciated!!
— Best Regards, Mia
hi dear author is this a plug and play chat app?
Hello queuemart,
Thanks for writing to us. Workable application is ready with components, workflow and navigation. User needs to integrate the side-Effect and might need to modify workflow if any.
Try this one: https://vuse-preview.hexesis.com/app/chat
Feel free to write us, if you have any other questions.
— Regards, Mia
Is this template compatible with Nuxt?
Hey there,
Thanks for writing to us. Nope, it’s not.
However we have used Vuetify as base for Vuse. You can check once below document for the same: https://vuetifyjs.com/en/getting-started/installation/#nuxt-install— Regards, Mia
Hi, I am looking for a way to implement translation i18n for form validation error messages. As for an exemple, I would like to translate in french the error messages available in the login form template : validationMessages: { form: { email: { required: “Please enter email”, email: “Email must be valid”, }, password: { required: “Please enter password”, minLength: “Password must be of 6 characters”, }, }, }, I have implemented a langage files src/lang/fr-FR/Pages/Authentification/Login.json and already using some translations for labels like so : $t(‘Pages.Authentication.Login.email’) Could please provide me with some guidance how to translate error messages when using vuelidate. Thanks a lot
Hello elpodge,
Thanks for writing to us.
Step1: Check your vuex for translation.locale. => It must be fr-FR
Step2: Add translation file to src/lang/vuse
Example: src/lang/fr-FR/validations/Messages.json
{
"email": {
"valid": "L'email doit être valide",
"required": "Email est requis"
}
}
Step3: Accessing translation variables
taking Example as login.vue
Step 3.1: Use validationLangMixin instead of validationMixin
import validationLangMixin from "@/mixins/validationLangMixin";Step 3.2: Using Translation variables
mixins: [validationLangMixin],
validations: {
...
...
},
validationMessages: {
form: {
email: {
required: "Validations.Messages.email.required",
email: "Validations.Messages.email.valid",
},
....
....
},
},
Feel free to write us on hexesist@gmail.com if it does not work for you.
Appreciate if you could provide feedback/ ratings, if you’re satisfied.
— Regards, Mia
It works fine. That’s great ! Thank you again for this hight quality answer.
Hi Mia, I’m coming back on the translation implementation. Following the process you described, it appears that vuetify (in the file plugins/vuetify.js) is not able to manage the local as set in the vuex => vuetify expects a string like “fr” as stated here : [https://vuetifyjs.com/en/features/internationalization/#getting-started} and vue-i18n expect a string like “fr-FR” as you explained above. The result is having vuetify components not translated as for exemple when using a v-data-table component. I am having consol warnings such as : “[Vuetify] Translation key “dataTable.ariaLabel.sortNone” not found, falling back to default”. Could you please help me to finalize a clean configuration for i18n ? thx
Hello ElPodge,
Thanks for writing us back. We are happy to assist you.
Step 1: Rename folder name
src/lang/fr-FR to src/lang/fr
Step: 2: Update fr-FR to fr
/src/config/locale.js src/i18n/languages.json
Step 3: Update i18n /src/i18n/index.js
import fr from "@/lang/fr";
const i18n = new VueI18n({
...
messages: { en, fr }, // Add fr
...
});
Step 4: Register fr in vuetify plugin src/plugins/vuetify.js
import frLocale from 'vuetify/lib/locale/fr'
lang: {
locales: { fr: frLocale },
current: store.state.translation.locale,
},
We have also verified the same step. It should be working fine with you. You can write us on our email hexesist@gmail.com if any issue.
— Regards, Mia
great! Works fine for me too. Thanks a lot.
You are most welcome
First, thank you for this very high quality template. In the file router/routes/vuse.js, I cannot figure out the role of the meta “layout”. Could you please explain where and how it is used ? Thank you
Hey elpodge,
Thanks for writing to us.
It’s not in action. It was being utilised in our previous version. Idea was to selecting Layout dynamically.
Once we will provide more layouts, we will be using that to construct the page by passing just a value with Layout as meta property.
— Regards, Mia
Thank you for this very quick answer
Dear Author,
Do you have any document to install this template in NuxtJs?
Hey hengseyha,
Thanks for writing us back. As such we are not giving any support to NuxtJs and not part of the Vuse Admin bundle, we don’t have any documentation for the Nuxtjs.
— Regards, Mia
how to use this template in nuxtjs ?
Hey hengseyha,
Thanks for writing to us.
Vuse admin is Core Vuejs CLI Admin template. We are not giving any support for nuxtjs for this item.
However, you can refer Vuetify below link for the nuxtjs integration. https://vuetifyjs.com/en/getting-started/quick-start/— Thanks, Mia
Where can I find a description of the widgets “Stats Widgets”, located on this page https://vuse-semidark-preview.hexesis.com/widgets/statistic ?
Hello Valeevadward,
Thanks for writing to us.
Kindly refer below link for our documentation. https://vuse-documention.hexesis.com/folder-structureYou can find it view file: src/views/Widgets/Stats/Index
— Regards, Jack
We have purchased Vuse license(Admin V3.0) for adjust our Rails web app. We want to use the webpacker gem and Vuse’s design(css and etc.) to adjust our web app using vuetify. So please teach us how we adjust Vuse files, especially setting of webpacker gem. Env. - ruby 2.6.5p114 - Rails 6.0.3.2 - webpacker 4.3.0 - vuetify 2.2.21
Hello Yamamoto,
Greetings for the day. Thanks for writing you to us and being valuable customer to us.
Kindly refer documentation attached within downloadable bundle. We also have online documentation which will help you a lot for Vuse structure, layout, routing, components and much more.
https://vuse-documention.hexesis.com/introduction https://vuse-preview.hexesis.com/dashboard/analyticalWe are not expertise with ruby or webpacker gem and also not taking any customisations or consultation requests.
Vuse admin is pure VueJs theme, it’s on user/developer how they integrate with other technologies. They are plenty of ways to do that with different technologies.
Of course, you can write us if you are facing any difficulties after referring documentation for usage. We will give solutions for it.
However, if still have any queries relevant to theme with Vuejs, sass, Vuetify, theme setting, Vuex. Feel free to write us on hexesist@gmail.com
—- Regards, Mia
im add new logo from (copy file vuselogo.vue) and im rename with vuegoogle, and when im call vue-google for used it, its error…
how to register new component?
Hello Winfar,
All the components placed inside the src/components/Stock are auto registered. You can find that configuration in
plugins/vuse.js
You can use directly without any import. However, you can also import manually as well.
Example:
import ExampleComponent from '@/components/Stock/ExampleComponent'You can use all the way to register a component as mentioned in official VueJS Document: https://vuejs.org/v2/guide/components-registration.html
Please write on our Email: hexesist@gmail.com for any technical queries.
— Regards, Mia
Hi friend, how i can set for auth for routes..
Thank you friend
Hey Winfar,
You can declare your routes in routes file.
https://vuse-documention.hexesis.com/folder-structure#src-folder-structureYou can find the routes folder via this folder structure.
– Regards, Mia
I have project with Vuetify and TypeScript.
It turned out that this template is not written in TypeScript.
By any chance, can I get a version of this template for Vuetify written in TypeScript?
Thanks, Anton
Hey Anton,
Thanks for writing us.
Unfortunately, we don’t have any plan for Typescript implementation.
— Regards, Mia
im trying to add cordova to skeleton project but i get error “Failed to resolve async component default: ChunkLoadError: Loading chunk Dashboards-AnalyticalDashboard-AnalyticalDashboard-vue failed”, can you help me?
Hello winfar,
Unfortunately , We are not expertises in Cordova and its configuration. We don’t provide any support with any customisation or other implementation.
Feel free to write us, if you have any issue with downloadAble bundle.
— Regards, Jack
Okay friends, thank you for reply my message…im trying to change all…
Thank you… 
I like this template…
Can i add cordova to this template friend? how can i do that?
Hey Winfar,
We are using Vuetify to design and build the Vuse admin template. Vuetify supports Cordova. However we have not set up that dependencies.
I would refer below document which will help you. https://vuetifyjs.com/en/getting-started/quick-start/#usage-with-cordovaHope that works for you.
— Regards, Mia
Thank you friend
im trying to add cordova to skeleton project but i get error “Failed to resolve async component default: ChunkLoadError: Loading chunk Dashboards-AnalyticalDashboard-AnalyticalDashboard-vue failed”, can you help me?
Hi buddy, can i remove all shadow from template, how i can do that?
Hello Winfar,
It’s possible but it would required some customisation with Styles and active/inactive Menu items and etc as such entire theme is following the shadow style with different config. However It’s not hard to do that if you stick to single config.
However, we are not providing any customisation services for now. However it’s achievable with a few changes.
— Regards, Jack
can we get rid of the slightly unpleasant shadows?
Hello Winfar,
Thanks for writing to us.
Well, it’s just css. You can remove it by changing it. As it’s customisation related question, I would request to write us on hexesist@gmail.com.
We will be happy to assist you the direction.
— Regards, Mia
Hi, When I build the template using npm run build, should I be copying the dist folder and the public folder or just the dist folder?
Hello santhoshmr,
Thanks for writing to us. You should take dist folder files/folders only,
— Regards, Mia