Vue Theming with UI Framework components and colors not loaded

Vue Designer
1

It is possible to load framework ui component colors scheme and theming in vue designer?

2

Hi @hasan,

Are you referring to Framework7? Can you provide a link to this component library for context. Thxs!

3

Hi @TechAkayy thankyou for your reply, I using DaisyUI Framework library with Nuxt and Tailwind, I successfully integrated into my project, but it is possible to use DaisyUI components like accordions, buttons, cards, also color schemes like base colors, primary colors, via Vue Designer? if possible it would be great!.

4

Cool! It should already be possible.

To use the design panel theme with daisyui as well, you can link it like this in your tailwind config file. This should ensure both tailwind & daisyui uses the same primary/secondary colors.

image
image1178×972 73.6 KB

With regards to using the daisyui components easily from the daisyui site, you can add this link https://daisyui.com/components/button/ to the library panel, and you should be able drag & drop a button or any other component into your page/component.

image
image1854×1328 296 KB

image
image2236×1102 346 KB

image
image1920×1169 159 KB

IMPORTANT: To navigate the page, note that you have to go into click-mode. Also, you can add the library panel as a panel instead of using the Insert toolbar.

image
image1920×1156 150 KB

Let me know how you go, I will prepare and add a quick start template to our start-screen for daisyui.

1 Like
5

@TechAkayy omg Thank you, this will make my life easier :tada:

1 Like
6

how to regenerate tokens.mjs/cjs after changing color theming in Vue Designer? it is automatically generated?

7

Yes, it automatically gets regenerated. To see it applied, sometimes you might have to restart the dev server and re-open your page.

8

Are you on the latest Vue Designer version?

9

yes i using 1.5 version

10

i did restart dev server but its not working

11

Is your project shareable? If you can push it to github, I can take a look. Or feel free to share your nuxt config and tailwind config file here.

12

sure GitHub - BoneDeath/garansi

13

The easiest way to ensure the theme is getting updated, is to check the token.mjs file if it’s getting updated with the new colors/images (if you are using git).

14

i just added new colors scheme primary yes it added, but when i make change the color is not updated

15

Design panel theme was getting written to an invalid file.

  • Generally you don’t need to set themePath and it will use the default one, and you need to set it only if you are using a different spot.
  • You can comment out the restartOnConfigUpdate & restartOnThemeUpdate as well. They are again not generally needed unless the theme update is not instantly applying.

Try commenting these three lines (themepath, restartOnConfigUpdate & restartOnThemeUpdate). Re-open your project in Vue Designer.

Once you change the indigo color in design panel (which I notice is what you are using as primary, I would suggest using the primary color instead), use Alt+S to see the new theme applied to the page.

  • If it doesn’t, then try enabling restartOnThemeUpdate.
  • If it doesn’t, then try restarting your dev-server and re-open your page.

image
image986×402 64.4 KB

Also, you haven’t wired the theme to tailwind, which you can do by following step 6 of @pinegrow/tailwindcss-plugin. This is needed if you are going to use text-primary-600 etc to color your tags.

image
image1550×1496 373 KB

Let me know if you have any more issues. Nice page, keep rocking :slight_smile: Feel free to remove the repo from github.

1 Like
16

Also, I would suggest updating to the latest pinegrow plugins/modules:

image

Run

npm install -D @pinegrow/nuxt-module@latest
npm install -D @pinegrow/tailwindcss-plugin@latest
1 Like
17

is still i need to using custom theme after wired the theme to tailwind?

my custom theme

themes: [{
        myTheme: {
          ...require("daisyui/src/theming/themes")["light"],
          primary: pg_colors.indigo[500],
          secondary: "teal",
        },
      }],
18

Yeah, you are just passing & sharing the theme to two tailwind plugins (pinegrow tailwind plugin & daisyui) to keep them consistent. No harm in that.

19

To specificially answer your question, passing the theme into Pinegrow tailwind plugin will customize your controls in the props panel, floating panel etc & extend tailwind’s theme with primary, secondary etc.

Note the para having text hello below the button that’s colored primary-600.

image
image1792×842 198 KB

20

Wow cool, i did the same thing firstly is not working i tried rerun dev server and reopen project but still, but is working after i reopen Vue Designer.