Get Free Trial

How to change theme in Vue.js?

Zander asked on April 30, 2020

In Vue.js project, I should use Npm to install flexmonster. So flexmonster’s package in node_modules. In that way, How do I specify the path of the theme file?

3 answers

Vera Didenko Vera Didenko Flexmonster April 30, 2020

Thank you for writing to us. 
We would like to explain that Flexmonster themes are available in the /theme folder of the flexmonster npm package.
Therefore, for Vue, the path of the desired Flexmonster theme file can be specified in the following way: 

import 'flexmonster/theme/lightblue/flexmonster.css';

An example of how Flexmonster styles are included in Vue can be seen in our sample Vue CLI project on GitHub.

Also, we would like to mention that Flexmonster integration with Vue is available in the form of an npm module.
You are welcome to check out our integration with Vue tutorial for guidance.
We would like to add that it is also possible to create a custom Flexmonster theme and use it in your project.
Recently, our team has added a custom theme builder app, making it easier to create your own Flexmonster themes.
Please let us know if this works.
Looking forward to your response.
Kind regards,

Zander May 6, 2020

Thank you for your reply.It all works!
At first I thought Flexmonster used the CDN to import theme files like Webdatarocks, but I didn’t find the file’s CDN path.

And this custom theme builder app is also very convenient.

BTW, Flexmonster’s localization JSON file for Chinese is so bad.It is too far away from Webdatarocks’s.?

Vera Didenko Vera Didenko Flexmonster May 6, 2020

Thank you for your feedback.
We are glad to hear that everything works and that you found the custom theme builder app useful. 

Regarding CDN, it is also possible to use it. Here is an example of the path for the light-blue theme:
Also, this can be seen in the following JSFiddle example:

About Flexmonster’s localization JSON file for Chinese, thank you for your feedback. 
We will take a look and see what can be improved. Also, any specific suggestions are greatly appreciated.

You are welcome to write to us in case further questions arise.
Kind regards,

Please login or Register to Submit Answer