Question: Getting started - use in project

Post Reply
ferdia
Posts: 3
Joined: 01 Jun 2021, 12:25

07 Jun 2021, 22:14

Hi everyone, this is my first post in this forum (bear with me) :)

So my company just bought the license for PrimeVue Designer, and I'm trying to set it up. I've read the Getting Started section and watched the video. But nowhere could I find info on how to get the code included for our styleguide repo (where we intend to combine it with custom build of Bootstrap using kss-node). The idea is to use the same base SASS variables for both. Is there no npm package that would allow us to easily add it to an existing project, and to keep it up to date (e.g. with latest). I really hope that zip-file isn't the only way of getting the code (reminds me of the 90s)!?

tugce.kucukoglu
Posts: 153
Joined: 23 Oct 2020, 09:28

10 Jun 2021, 11:47

Hi,

1) run sass --update src/assets:src/assets
2) copy the theme.css file
3) paste it your project
4) import the theme.css to the main.js

or second way include the theme file to your project and add sass command to your bundle.

Best,

ferdia
Posts: 3
Joined: 01 Jun 2021, 12:25

16 Jun 2021, 21:06

Thanks for the reply, tugce.kucukoglu. However, I don't understand what you mean. Are you describing how one can add / retain a given theme?

My concern is how to keep PrimeVue Designer as a whole up to date with npm. We're not copying files anymore, as we did 10-20 years ago. And our themes are automatically deployed to CDN at push to master with CI / CD-pipeline (triggering npm scripts - target folder based on version defined in package.json). This is common practice nowadays. Also, we'd like to have PrimeVue under node_modules (no point in having the entire PrimeVue code base under version control). Is there no other way of using PrimeVue Designer then by downloading the code of a specific version as a ZIP-file? If yes, does that mean that we have to do the whole process again when we want to take a newer version into use?

tugce.kucukoglu
Posts: 153
Joined: 23 Oct 2020, 09:28

17 Jun 2021, 16:41

No, you don't have to download for specific versions as a zip every time to update PrimeVue version. You could just upgrade PrimeVue version of PrimeVue Designer. For example

Code: Select all

npm install primevue@3.5.1

ferdia
Posts: 3
Joined: 01 Jun 2021, 12:25

14 Jul 2021, 13:19

Sorry, didn't understand what you mean. Also, I believe I was unclear. When I wrote...
Also, we'd like to have PrimeVue under node_modules (no point in having the entire PrimeVue code base under version control).
...I actually meant:
Also, we'd like to have PrimeVue Designer under node_modules (no point in having the entire PrimeVue Designer code base under version control).
Sorry for the confusion.
  1. So what I'm was trying to ask, is there something like...

    Code: Select all

    npm install primevue-designer@3.0.1 --save-dev
    Alternatively, is there at least a git repo for PrimeVue Designer that can be include as git submodule?
    Also, I have some further questions....
  2. In the .env file, what is the function of the VUE_APP_THEME_BUILDER_URL the 2nd line?:

    Code: Select all

    VUE_APP_THEME_BUILDER_URL=https://www.primefaces.org/themegen-vue
  3. On the bottom of the documentation it says that the theme can be built like this:

    Code: Select all

    sass --update src/assets/mytheme:src/assets/mytheme
    Which sass command are you invoking here? There are many implementations and versions of sass /scss. I see that "node-sass": "^4.12.0" is included in package.json, but there is no script to use it from CLI.
  4. Will support for Bootstrap 5 be added soon?
  5. I want to define the theme and settings outside the folder structure of primevue-designer (otherwise it is hard to handle updates - overwriting existing code)
  6. npm run build builds an entire vue application (with 3 unminified css files), I'm only interested in one <my-primevue-theme>.min.css and one <my-primevue-theme>.min.css.map file, which I can deploy to CDN to be used for several web applications. How do I do that?
  7. The $colors-map in f.example _variables_light.scss (for bootstrap theme) doesn't seem to be used anywhere. Neither is there a map for $theme-colors (see Bootstrap documentation). Bootstrap's Utlilities API to generate full palette of colors - which I'd expect from a Bootstrap based theme - doesn't seem to be used. Instead, the bootstrap themed include numerous hard-coded color values. Are there any plans to improve this?
Cheers :)

cagatay.civici
Prime
Posts: 18494
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

03 Aug 2021, 16:40

1) Since PrimeVue Theme Designer is not open source, we haven't pushed it to npm due to licensing. However if you have an internal npm repository, you can download the zip file and push it to your own npm repo so that other projects can received it via node_modules. Only downside is, you need to update the npm bundle after a release.

2) It is to configure the web service url that builds the sass to css.

3) Implementation does not matter but usually dart-sass is the suggested one.

4) There are plans but not concrete. Depends on community demand.

5) Variables use !default so order should not matter. There is also _overrides to add your customizations rather than updating the core sass which is not suggested.

6) See #3 please. Or you can let vue-cli do it for you, if you import the sass to a vue-cli app directly.

7) They are used to generate CSS variables.

Post Reply

Return to “PrimeVue Theme Designer API”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest