Vue Designer starter template issue

JackSJ · September 21, 2023, 9:15pm

Version 1.2
First installation with template using NUXT + NUXTUI
Once i npm run dev, i get these messages:
WARN Failed to load Tailwind config at: ./tailwind.config.ts pg_font_urls is not defined

Vue designer config panel shows everything is ok
but I can’t even load it, it says element is not mapped

Which nodejs version you are using?

Full messages from visual studio code after npm run dev here:

Nuxi 3.6.5                                                                                                         4:52:25 AM
Nuxt 3.6.5 with Nitro 2.6.3                                                                                        4:52:25 AM                                                                                                           4:52:28 AM



 WARN  Failed to load Tailwind config at: ./tailwind.config.ts pg_font_urls is not defined        nuxt:tailwindcss 4:52:29 AM

  at themes\pg-tailwindcss\tokens.cjs:217:3
  at evalModule (node_modules\jiti\dist\jiti.js:1:255614)                                                          4:52:25 AM  
  at jiti (node_modules\jiti\dist\jiti.js:1:253542)
  at tailwind.config.ts:5:18
  at evalModule (node_modules\jiti\dist\jiti.js:1:255614)
  at jiti (node_modules\jiti\dist\jiti.js:1:253542)
  at node_modules\tailwindcss\lib\lib\load-config.js:37:30
  at loadConfig (node_modules\tailwindcss\lib\lib\load-config.js:39:6)
  at /C:/gatewayapp/my-nuxtui-app/node_modules/@nuxtjs/tailwindcss/dist/module.mjs:235:29
  at Array.map (<anonymous>)

ℹ Using Tailwind CSS from ~/assets/css/tailwind.css                                              nuxt:tailwindcss 4:52:43 AM

 WARN  Slow module @nuxtjs/tailwindcss took 14152.03ms to setup.                                                   4:52:43 AM  


 WARN  Slow module @nuxt/ui took 14462.38ms to setup.                                                              4:52:43 AM  

ℹ Using html-validate to validate server-rendered HTML                                                            4:52:44 AM
ℹ Tailwind Viewer: http://localhost:3000/_tailwind/                                              nuxt:tailwindcss 4:52:45 AM

[4:52:45 AM]  WARN  Duplicated imports "defineShortcuts", the one from "C:/gatewayapp/my-nuxtui-app/node_modules/@nuxt/ui/dist/runtime/composables/defineShortcuts.d.ts" has been ignored


[4:52:45 AM]  WARN  Duplicated imports "useCopyToClipboard", the one from "C:/gatewayapp/my-nuxtui-app/node_modules/@nuxt/ui/dist/runtime/composables/useCopyToClipboard.d.ts" has been ignored


[4:52:45 AM]  WARN  Duplicated imports "useFormGroup", the one from "C:/gatewayapp/my-nuxtui-app/node_modules/@nuxt/ui/dist/runtime/composables/useFormGroup.d.ts" has been ignored


[4:52:45 AM]  WARN  Duplicated imports "createPopper", the one from "C:/gatewayapp/my-nuxtui-app/node_modules/@nuxt/ui/dist/runtime/composables/usePopper.d.ts" has been ignored


[4:52:45 AM]  WARN  Duplicated imports "usePopper", the one from "C:/gatewayapp/my-nuxtui-app/node_modules/@nuxt/ui/dist/runtime/composables/usePopper.d.ts" has been ignored


[4:52:45 AM]  WARN  Duplicated imports "_useShortcuts", the one from "C:/gatewayapp/my-nuxtui-app/node_modules/@nuxt/ui/dist/runtime/composables/useShortcuts.d.ts" has been ignored


[4:52:45 AM]  WARN  Duplicated imports "useShortcuts", the one from "C:/gatewayapp/my-nuxtui-app/node_modules/@nuxt/ui/dist/runtime/composables/useShortcuts.d.ts" has been ignored


[4:52:45 AM]  WARN  Duplicated imports "useTimer", the one from "C:/gatewayapp/my-nuxtui-app/node_modules/@nuxt/ui/dist/runtime/composables/useTimer.d.ts" has been ignored


[4:52:45 AM]  WARN  Duplicated imports "useToast", the one from "C:/gatewayapp/my-nuxtui-app/node_modules/@nuxt/ui/dist/runtime/composables/useToast.d.ts" has been ignored


[4:52:47 AM]  WARN  Duplicated imports "defineShortcuts", the one from "C:/gatewayapp/my-nuxtui-app/node_modules/@nuxt/ui/dist/runtime/composables/defineShortcuts.d.ts" has been ignored


[4:52:47 AM]  WARN  Duplicated imports "useCopyToClipboard", the one from "C:/gatewayapp/my-nuxtui-app/node_modules/@nuxt/ui/dist/runtime/composables/useCopyToClipboard.d.ts" has been ignored


[4:52:47 AM]  WARN  Duplicated imports "useFormGroup", the one from "C:/gatewayapp/my-nuxtui-app/node_modules/@nuxt/ui/dist/runtime/composables/useFormGroup.d.ts" has been ignored


[4:52:47 AM]  WARN  Duplicated imports "createPopper", the one from "C:/gatewayapp/my-nuxtui-app/node_modules/@nuxt/ui/dist/runtime/composables/usePopper.d.ts" has been ignored


[4:52:47 AM]  WARN  Duplicated imports "usePopper", the one from "C:/gatewayapp/my-nuxtui-app/node_modules/@nuxt/ui/dist/runtime/composables/usePopper.d.ts" has been ignored


[4:52:47 AM]  WARN  Duplicated imports "_useShortcuts", the one from "C:/gatewayapp/my-nuxtui-app/node_modules/@nuxt/ui/dist/runtime/composables/useShortcuts.d.ts" has been ignored


[4:52:47 AM]  WARN  Duplicated imports "useShortcuts", the one from "C:/gatewayapp/my-nuxtui-app/node_modules/@nuxt/ui/dist/runtime/composables/useShortcuts.d.ts" has been ignored


                                                                                                                   4:57:46 AM
ℹ hmr update /assets/css/tailwind.css                                                                             4:57:46 AM 
✔ Vite server hmr 3 files in 6782.767ms                                                                           5:12:37 AM
[Vue Router warn]: uncaught error during route navigation:                                                         5:12:38 AM
[[vite-node] [VITE_ERROR] /themes/pg-tailwindcss/tokens.mjs                                                        5:12:38 AM
at /themes/pg-tailwindcss/tokens.mjs] {
  cause: {
    statusMessage: 'Vite Error',
    message: '[vite-node] [VITE_ERROR] /themes/pg-tailwindcss/tokens.mjs',
    stack: '[vite-node] [VITE_ERROR] /themes/pg-tailwindcss/tokens.mjs\n' +
      'at /themes/pg-tailwindcss/tokens.mjs'
  },                                                                                                               4:57:46 AM  
  statusCode: 500,
  fatal: false,
  unhandled: false,
  statusMessage: 'Vite Error',
  data: undefined
}
[Vue warn]: Component LayoutLoader is missing template or render function.                                         5:12:38 AM
[Vue Router warn]: uncaught error during route navigation:                                                         5:12:38 AM
[[vite-node] [VITE_ERROR] /themes/pg-tailwindcss/tokens.mjs                                                        5:12:38 AM
at /themes/pg-tailwindcss/tokens.mjs] {
  cause: {
    statusMessage: 'Vite Error',
    message: '[vite-node] [VITE_ERROR] /themes/pg-tailwindcss/tokens.mjs',
    stack: '[vite-node] [VITE_ERROR] /themes/pg-tailwindcss/tokens.mjs\n' +
      'at /themes/pg-tailwindcss/tokens.mjs'
  },
  statusCode: 500,
  fatal: false,
  unhandled: false,
  statusMessage: 'Vite Error',
  data: undefined,
  __nuxt_error: true
}
[Vue warn]: Component LayoutLoader is missing template or render function.                                         5:12:38 AM  
[@nuxt/ui] Primary color 'pp' not found in Tailwind config                                                         5:12:38 AM
[5:12:38 AM] HTML validation errors found for /__nuxt_error?url=/&statusCode=500&statusMessage=Vite+Error&message=%5Bvite-node%

                                                                                                                   5:13:06 AM
ℹ hmr update /pages/quick-start/[...slug].vue, /assets/css/tailwind.css, /assets/css/tailwind.css?direct          5:13:06 AM

TechAkayy · September 21, 2023, 9:45pm

Thanks bunch for the details @JackSJ.

Request you to try again. I just committed a minor fix to our github template. Apologies for the inconvenience.

JackSJ · September 22, 2023, 1:21am

Thanks, now http://localhost:3000/ is working, but I still can’t see anything on the vuedesigner software. It says “Dev-server connection is not active. Start your dev server first!”

Messages shown in visual studio code:

Nuxi 3.6.5                                                                                                   9:11:55 AM
Nuxt 3.6.5 with Nitro 2.6.3                                                                                  9:11:55 AM
                                                                                                             9:11:56 AM


ℹ Using Tailwind CSS from ~/assets/css/tailwind.css                                        nuxt:tailwindcss 9:12:06 AM

 WARN  Slow module @nuxtjs/tailwindcss took 9071.28ms to setup.                                              9:12:06 AM

                                                                                                             9:11:55 AM  
 WARN  Slow module @nuxt/ui took 9228.27ms to setup.                                                         9:12:06 AM

ℹ Using html-validate to validate server-rendered HTML                                                      9:12:06 AM
               nuxt:tailwindcss 9:12:07 AM

[9:12:07 AM]  WARN  Duplicated imports "defineShortcuts", the one from "C:/gatewayapp/gatewayapp/node_modules/@nuxt/ui/dist/runtime/composables/defineShortcuts.d.ts" has been ignored


[9:12:07 AM]  WARN  Duplicated imports "useCopyToClipboard", the one from "C:/gatewayapp/gatewayapp/node_modules/@nuxt/ui/dist/runtime/composables/useCopyToClipboard.d.ts" has been ignored


[9:12:07 AM]  WARN  Duplicated imports "useFormGroup", the one from "C:/gatewayapp/gatewayapp/node_modules/@nuxt/ui/dist/runtime/composables/useFormGroup.d.ts" has been ignored


[9:12:07 AM]  WARN  Duplicated imports "createPopper", the one from "C:/gatewayapp/gatewayapp/node_modules/@nuxt/ui/dist/runtime/composables/usePopper.d.ts" has been ignored


[9:12:07 AM]  WARN  Duplicated imports "usePopper", the one from "C:/gatewayapp/gatewayapp/node_modules/@nuxt/ui/dist/runtime/composables/usePopper.d.ts" has been ignored


[9:12:07 AM]  WARN  Duplicated imports "_useShortcuts", the one from "C:/gatewayapp/gatewayapp/node_modules/@nuxt/ui/dist/runtime/composables/useShortcuts.d.ts" has been ignored


[9:12:07 AM]  WARN  Duplicated imports "useShortcuts", the one from "C:/gatewayapp/gatewayapp/node_modules/@nuxt/ui/dist/runtime/composables/useShortcuts.d.ts" has been ignored


[9:12:07 AM]  WARN  Duplicated imports "useTimer", the one from "C:/gatewayapp/gatewayapp/node_modules/@nuxt/ui/dist/runtime/composables/useTimer.d.ts" has been ignored


[9:12:07 AM]  WARN  Duplicated imports "useToast", the one from "C:/gatewayapp/gatewayapp/node_modules/@nuxt/ui/dist/runtime/composables/useToast.d.ts" has been ignored


[9:12:09 AM]  WARN  Duplicated imports "defineShortcuts", the one from "C:/gatewayapp/gatewayapp/node_modules/@nuxt/ui/dist/runtime/composables/defineShortcuts.d.ts" has been ignored


[9:12:09 AM]  WARN  Duplicated imports "useCopyToClipboard", the one from "C:/gatewayapp/gatewayapp/node_modules/@nuxt/ui/dist/runtime/composables/useCopyToClipboard.d.ts" has been ignored


[9:12:09 AM]  WARN  Duplicated imports "useFormGroup", the one from "C:/gatewayapp/gatewayapp/node_modules/@nuxt/ui/dist/runtime/composables/useFormGroup.d.ts" has been ignored


[9:12:09 AM]  WARN  Duplicated imports "createPopper", the one from "C:/gatewayapp/gatewayapp/node_modules/@nuxt/ui/dist/runtime/composables/usePopper.d.ts" has been ignored


[9:12:09 AM]  WARN  Duplicated imports "usePopper", the one from "C:/gatewayapp/gatewayapp/node_modules/@nuxt/ui/dist/runtime/composables/usePopper.d.ts" has been ignored


[9:12:09 AM]  WARN  Duplicated imports "_useShortcuts", the one from "C:/gatewayapp/gatewayapp/node_modules/@nuxt/ui/dist/runtime/composables/useShortcuts.d.ts" has been ignored


[9:12:09 AM]  WARN  Duplicated imports "useShortcuts", the one from "C:/gatewayapp/gatewayapp/node_modules/@nuxt/ui/dist/runtime/composables/useShortcuts.d.ts" has been ignored


[9:12:09 AM]  WARN  Duplicated imports "useTimer", the one from "C:/gatewayapp/gatewayapp/node_modules/@nuxt/ui/dist/runtime/composables/useTimer.d.ts" has been ignored


[9:12:09 AM]  WARN  Duplicated imports "useToast", the one from "C:/gatewayapp/gatewayapp/node_modules/@nuxt/ui/dist/runtime/composables/useToast.d.ts" has been ignored

ℹ Vite client warmed up in 13509ms                                                                          9:12:22 AM
✔ Nitro built in 4198 ms                                                                              nitro 9:12:25 AM
[9:13:06 AM] HTML validation errors found for /__nuxt_error?url=/_tailwind/&statusCode=404&statusMessage=Page+not+found:+/_tailwind/&message=Page+not+found:+/_tailwind/&stack

inline
  58:502  error  Initial heading level must be <h1> but got <h5>  heading-level
  64:9    error  <button> is missing required "type" attribute    element-required-attributes

✖ 2 problems (2 errors, 0 warnings)


HTML validation errors found for /                                                                           9:13:11 AM

inline
  57:571   error  Initial heading level must be <h1> but got <h5>                     heading-level
  59:653   error  Heading level can only increase by one, expected <h2> but got <h5>  heading-level
  59:4824  error  Heading level can only increase by one, expected <h4> but got <h6>  heading-level
  59:6759  error  <img> is missing required "alt" attribute                           wcag/h37
  59:6921  error  Unknown element <lite-youtube>                                      no-unknown-elements

✖ 5 problems (5 errors, 0 warnings)

TechAkayy · September 22, 2023, 5:55am

Hi Jack,

Please follow the troubleshooting guide to remove any redundant nwjs processes, which is the common reason for connection issue.

Also, I have DM’ed you to see if we could troubleshoot remotely. Let me know!

mat5ch · September 25, 2023, 1:08pm

I am facing similar issues using e.g. the Nuxt starter. Thus I decided to join the conversion in this thread instead of creating a new one.

I cannot access the Tailwind Design panel:

I noticed that there were also some errors after starting up the dev server and browsing to the site:

Current setup:

macOS 13.5.2
Node 18.18.0
Vue Designer 1.2

TechAkayy · September 26, 2023, 5:45am

Hi @mat5ch,

Thanks for the details. Im assuming you don’t have any connection issues and are able to open the startup page and work on the tree.

To help troubleshoot the design panel issue, can you open the devtools via menu - Vue > Open devtools, or by using shortcut cmd/ctrl+shift+c and report back any logged errors, and we will look into it as a priority.

The errors logged in the console when starting devserver is by the @nuxtjs/html-validator module. You can comment it out in your nuxt.config.ts file for now. We will have better validation of the templates on Vue Designer side soon.

@JackSJ, how did you go

mat5ch · September 26, 2023, 7:22am

Thanks. Yes, the connection is working in general.

As requested, here is the console output inside the devtools:

TechAkayy · September 26, 2023, 3:04pm

Thanks bunch @mat5ch. I have identified the issue, and will release a fix in a day or two

TechAkayy · September 29, 2023, 1:44pm

@mat5ch, this issue is fixed with our today’s Vue Designer 1.3 update.

Thanks for reporting this. Please let us know if you face any other issues. Cheers!

mat5ch · September 29, 2023, 2:27pm

Thanks. I had a quick look earlier and can confirm

Any updates on the html validator part, should I just leave it commented out?

TechAkayy · September 29, 2023, 2:29pm

Just leave it commented out for now, will cover it in the upcoming ones!

Topic		Replies	Views
Vue designer tailwind styling problem Vue Designer bug , tailwind , vue-designer	20	129	June 27, 2024
Vue Theming with UI Framework components and colors not loaded Vue Designer feature-request	22	37	August 26, 2024
Running Nuxt/Vue on a VM with mounted hard drive Vue Designer bug	1	150	November 20, 2023
TailwindUI components interactions in PG? General tailwind	2	189	February 16, 2023
Can I use Vue Designer for Vite (vanilla-js, no Vue) Vue Designer	12	238	December 8, 2023

Vue Designer starter template issue

Related topics