Question: Getting started - use in project

Post Reply
Posts: 4
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)!?

Posts: 173
Joined: 23 Oct 2020, 09:28

10 Jun 2021, 11:47


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.


Posts: 4
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?

Posts: 173
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

Posts: 4
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

  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> 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 :)

Posts: 18505
Joined: 05 Jan 2009, 00:21
Location: Cybertron

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.

Posts: 4
Joined: 01 Jun 2021, 12:25

07 Aug 2021, 21:47

Thanks for the reply, @cagatay.civici.
  1. Isn't that just a question of setting up an npm registry with authentication scheme (e.g. so one could use a token as secret in CI/CD pipeline)? That would really help a lot. For example, now you just came out with new version of PrimeVue, including new version of PrimeVue Theme designer (3.4.0). It is a hassle to deal with those ZIP-files (and quite honestly, it's a very outdated method for distributing commercially licensed code).
  2. OK, since we're only interested in automated build of theme (using script in package.json file), I guess VUE_APP_THEME_BUILDER_URL isn't relevant - right?
  3. Well, I tried several different implementations and versions, and it took some time to find one that worked. I propose that you include it in your package.json file, along with script that accepts arguments (and some documentation).
  4. We would very much appreciate support for Bootstrap 5, as we are already using it for everything but the vue components from PrimeVue.
  5. Most of the variables in for example src/assets/themes/bootstrap4/bootstrap4-light/_variables_light.scss are not assigned values with !default (EDIT: I see now that version 3.4.0 has added !defaults in the given file). Regarding the _overrides part, could you please point us to the relevant documentation? We fully agree, we don't want to touch the code of the PrimeVue Theme designer. Ideally, we'd just like to run a predefined scipt in package.json that takes some arguments (e.g. base theme that we want to build, and path to file with sass variables to override the defaults).
  6. Our CI/CD pipeline is set up to build and deploy css and files to CDN (along with living style guide and developer portal), so the css can be cached and consumed by several apps independently of one another. So we're not relating to vue-cli for themes at all. See previous point for our needs. Your reply to #3 doesn't seem relevant in that regard, sorry :)
  7. You wrote : "They are used to generate CSS variables." (with reference to $theme-colors map as described in Bootstrap documentation), along with Bootstrap's Utlilities API). Sorry, but we couldn't understand what you mean with "They are used to generate CSS variables.". If you look at the above mentioned _variables_light.scss file, I can see there is another map, named $colors. But then this file also contains a lot of other hardcoded color values, which don't relate to the $colors map (e.g. $errorColor: #dc3545;). In total there are 130 hardcoded hex color assignments in that file, and 36 hardcoded rgba color assignments (none of which reuse predefined variables). We assume it would be possible to do with no more than around 10 primary theme colors, another 10 for grayscale range, and some explicit assignments to semantic colors (e.g $danger:$red;). The rest can be re-assignments of variables, use of mixins, and use of placeholders and @extend (to make the scss and resulting css in compliance with the DRY principle). That's how we already do it with our custom build of Bootstrap.

Post Reply

Return to “PrimeVue Theme Designer API”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests