We have updated Flexmonster Software License Agreement, effective as of September 30, 2024. Learn more about what’s changed.

How to change theme in Vue.js?

Answered
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?
thx.

3 answers

Public
Vera Didenko Vera Didenko Flexmonster April 30, 2020

Hello, 
 
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,
Vera
 

Public
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.?

Public
Vera Didenko Vera Didenko Flexmonster May 6, 2020

Hello, 
 
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: https://cdn.flexmonster.com/theme/lightblue/flexmonster.min.css
Also, this can be seen in the following JSFiddle example: https://jsfiddle.net/flexmonster/bo56pzbq/

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,
Vera

Please login or Register to Submit Answer