# Vue Designer starter template issue

**URL:** <https://forum.pinegrow.com/t/vue-designer-starter-template-issue/8383>\
**Category:** Bug Reports\
**Created:** [September 21, 2023, 9:15pm UTC](https://forum.pinegrow.com/t/vue-designer-starter-template-issue/8383 "2023-09-21T21:15:10Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![JackSJ](https://avatars.discourse-cdn.com/v4/letter/j/f04885/32.png) [@JackSJ](https://forum.pinegrow.com/u/JackSJ)\
**Post date:** [September 21, 2023, 9:15pm UTC](https://forum.pinegrow.com/t/vue-designer-starter-template-issue/8383/1 "2023-09-21T21:15:10Z")

</div>

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:

```auto
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

```

---

<div class="post-metadata">

**Author:** ![TechAkayy](https://avatars.discourse-cdn.com/v4/letter/t/ce73a5/32.png) [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)\
**Post date:** [September 21, 2023, 9:45pm UTC](https://forum.pinegrow.com/t/vue-designer-starter-template-issue/8383/2 "2023-09-21T21:45:13Z")

</div>

> [@JackSJ](#):
>
> pg\_font\_urls

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.

---

<div class="post-metadata">

**Author:** ![JackSJ](https://avatars.discourse-cdn.com/v4/letter/j/f04885/32.png) [@JackSJ](https://forum.pinegrow.com/u/JackSJ)\
**Post date:** [September 22, 2023, 1:21am UTC](https://forum.pinegrow.com/t/vue-designer-starter-template-issue/8383/3 "2023-09-22T01:21:40Z")

</div>

Thanks, now [http://localhost:3000/](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:

```auto
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)

```

---

<div class="post-metadata">

**Author:** ![TechAkayy](https://avatars.discourse-cdn.com/v4/letter/t/ce73a5/32.png) [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)\
**Post date:** [September 22, 2023, 5:55am UTC](https://forum.pinegrow.com/t/vue-designer-starter-template-issue/8383/4 "2023-09-22T05:55:55Z")

</div>

Hi Jack,

Please follow the [troubleshooting](https://pinegrow.com/docs/vue/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!

---

<div class="post-metadata">

**Author:** ![mat5ch](https://avatars.discourse-cdn.com/v4/letter/m/0ea827/32.png) [@mat5ch](https://forum.pinegrow.com/u/mat5ch)\
**Post date:** [September 25, 2023, 1:08pm UTC](https://forum.pinegrow.com/t/vue-designer-starter-template-issue/8383/5 "2023-09-25T13:08:13Z")

</div>

I am facing similar issues using e.g. the [Nuxt starter](https://github.com/pinegrow/pg-nuxt-tailwindcss). Thus I decided to join the conversion in this thread instead of creating a new one.

I cannot access the Tailwind Design panel:

 ![empty_tailwind_design_panel](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/0/0d95bf73702eb644bc242310f3007a87abf8a730.png)

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

 ![devServer_output](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/9/9b6efb80a8615a5486a439ada73aba0d307d293e.png)

Current setup:

- macOS 13.5.2
- Node 18.18.0
- Vue Designer 1.2

---

<div class="post-metadata">

**Author:** ![TechAkayy](https://avatars.discourse-cdn.com/v4/letter/t/ce73a5/32.png) [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)\
**Post date:** [September 26, 2023, 5:45am UTC](https://forum.pinegrow.com/t/vue-designer-starter-template-issue/8383/6 "2023-09-26T05:45:06Z")

</div>

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.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/a/a74e1aaca49ecffd5eeb9d9c3b6429063e5d7808.jpeg)

@JackSJ, how did you go 😊

---

<div class="post-metadata">

**Author:** ![mat5ch](https://avatars.discourse-cdn.com/v4/letter/m/0ea827/32.png) [@mat5ch](https://forum.pinegrow.com/u/mat5ch)\
**Post date:** [September 26, 2023, 7:22am UTC](https://forum.pinegrow.com/t/vue-designer-starter-template-issue/8383/7 "2023-09-26T07:22:18Z")

</div>

Thanks. Yes, the connection is working in general.

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

 ![vuedesigner_devtools_console_output](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/c/c987bed6c9487ad5f3c9dd2a7b757cdeff96de82.png)

---

<div class="post-metadata">

**Author:** ![TechAkayy](https://avatars.discourse-cdn.com/v4/letter/t/ce73a5/32.png) [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)\
**Post date:** [September 26, 2023, 3:04pm UTC](https://forum.pinegrow.com/t/vue-designer-starter-template-issue/8383/8 "2023-09-26T15:04:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![TechAkayy](https://avatars.discourse-cdn.com/v4/letter/t/ce73a5/32.png) [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)\
**Post date:** [September 29, 2023, 1:44pm UTC](https://forum.pinegrow.com/t/vue-designer-starter-template-issue/8383/9 "2023-09-29T13:44:16Z")

</div>

@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!

---

<div class="post-metadata">

**Author:** ![mat5ch](https://avatars.discourse-cdn.com/v4/letter/m/0ea827/32.png) [@mat5ch](https://forum.pinegrow.com/u/mat5ch)\
**Post date:** [September 29, 2023, 2:27pm UTC](https://forum.pinegrow.com/t/vue-designer-starter-template-issue/8383/10 "2023-09-29T14:27:22Z")

</div>

Thanks. I had a quick look earlier and can confirm 🙂

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

---

<div class="post-metadata">

**Author:** ![TechAkayy](https://avatars.discourse-cdn.com/v4/letter/t/ce73a5/32.png) [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)\
**Post date:** [September 29, 2023, 2:29pm UTC](https://forum.pinegrow.com/t/vue-designer-starter-template-issue/8383/11 "2023-09-29T14:29:10Z")

</div>

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