Discussion on Vuse: VueJs CLI Material Admin

Discussion on Vuse: VueJs CLI Material Admin

By
Cart 326 sales
Well Documented

hexesis supports this item

Supported

This author's response time can be up to 5 business days.

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

Hi! I have purchased the Vuse Admin theme and I can not seem to find how you handle internationalization. I see the i18n section and you are using index.js istead of i18n.js like most of the tutorials I find. The translations are stored in json files under >lang (for locales) > lang folder (en, jp, etc) > vuse (for sidebar). I tried adding an en.json to the root of en folder and to vuse, but it doesn’t pick it up when I add any calls like

{{ $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

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-i18n

I 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 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-structure

You 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/analytical

We 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-structure

You 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-cordova

Hope 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

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve ThemeForest.

Sure, take me to the survey