Vue designer tailwind styling problem

Vue Designer
, ,
1

I just setup some Vue project with tailwind module, but i got problem every time when edit some element styling example color text, the changed not refresh automatically, I need to perform ALT+S to see the changes, is different when using sample project is automatically changed, I
attach my nuxt.config.ts file if there any wrong


// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },

  modules:['@pinegrow/nuxt-module', "@nuxtjs/tailwindcss"],
  pinegrow: {
    liveDesigner: {
      startupPage: 'app.vue',
      tailwindcss: {
        /* Please ensure that you update the filenames and paths to accurately match those used in your project. */
        configPath: 'tailwind.config.js',
        cssPath: '@/assets/css/tailwind.css',
        // themePath: false, // Set to false so that Design Panel is not used
        // restartOnConfigUpdate: true,
        restartOnThemeUpdate: true,
      },
      //... existing config
    },
  },
})

and this is my terminal log when i perform changes

Pinegrow: Connected to http://127.0.0.1:40001/livedesigner
ℹ Vite client warmed up in 3125ms                                                                                                                                                                11.56.50
ℹ Vite server warmed up in 2934ms                                                                                                                                                                11.56.51
✔ Nuxt Nitro server built in 1267 ms                                                                                                                                                       nitro 11.56.52

 ERROR  [unhandledRejection] read ECONNRESET                                                                                                                                                      11.57.13  

  at TCP.onStreamRead (node:internal/stream_base_commons:217:20)

ℹ hmr update /app.vue, /node_modules/tailwindcss/tailwind.css, /node_modules/tailwindcss/tailwind.css?direct                                                                                     11.57.13
ℹ hmr update /app.vue, /node_modules/tailwindcss/tailwind.css, /node_modules/tailwindcss/tailwind.css?direct (x2)                                                                                11.57.24
ℹ hmr update /app.vue, /node_modules/tailwindcss/tailwind.css, /node_modules/tailwindcss/tailwind.css?direct (x3)                                                                                11.57.31
ℹ hmr update /app.vue, /node_modules/tailwindcss/tailwind.css, /node_modules/tailwindcss/tailwind.css?direct (x4)                                                                                11.57.36
ℹ nuxt.config.ts updated. Restarting Nuxt...                                                                                                                                                     11.59.34
ℹ Using default Tailwind CSS file                                                                                                                                               nuxt:tailwindcss 11.59.36
  ➜ DevTools: press Shift + Alt + D in the browser (v1.3.6)                                                                                                                                       11.59.36

ℹ Tailwind Viewer: http://localhost:3000/_tailwind/                                                                                                                             nuxt:tailwindcss 11.59.36
[11.59.38] Pinegrow: As configPath at D:\Data IT Development\Hasan (Frontend Programmer)\Data Hasan\WEB\garansi\tailwind.config.js was missing and D:\Data IT Development\Hasan (Frontend Programmer)\Data Hasan\WEB\garansi\tailwind.config.ts (different extension) was found, the later shall be used.
Pinegrow: Disconnected!                                                                                                                                                                           11.59.38
                                                                                                                                                                                                  11.59.39
Pinegrow: Connected to http://127.0.0.1:40001/livedesigner
ℹ hmr update /app.vue, /node_modules/tailwindcss/tailwind.css                                                                                                                                    11.59.41
ℹ Vite client warmed up in 3678ms                                                                                                                                                                11.59.42
ℹ Vite server warmed up in 2962ms                                                                                                                                                                11.59.42
✔ Nuxt Nitro server built in 1363 ms                                                                                                                                                       nitro 11.59.43
✔ Vite server hmr 7 files in 347.204ms
ℹ hmr update /app.vue, /node_modules/tailwindcss/tailwind.css, /node_modules/tailwindcss/tailwind.css?direct                                                                                     11.59.58
✔ Vite server hmr 9 files in 193.043ms

 ERROR  [unhandledRejection] read ECONNRESET                                                                                                                                                      12.25.37  

  at TCP.onStreamRead (node:internal/stream_base_commons:217:20)

ℹ hmr update /app.vue, /node_modules/tailwindcss/tailwind.css, /node_modules/tailwindcss/tailwind.css?direct (x2)                                                                                12.25.46
ℹ hmr update /app.vue, /node_modules/tailwindcss/tailwind.css, /node_modules/tailwindcss/tailwind.css?direct (x3)                                                                                12.25.49
ℹ hmr update /app.vue, /node_modules/tailwindcss/tailwind.css, /node_modules/tailwindcss/tailwind.css?direct (x4)                                                                                12.25.54
ℹ hmr update /app.vue, /node_modules/tailwindcss/tailwind.css, /node_modules/tailwindcss/tailwind.css?direct (x5)                                                                                12.26.00

 ERROR  [unhandledRejection] read ECONNRESET                                                                                                                                                      12.26.04  

  at TCP.onStreamRead (node:internal/stream_base_commons:217:20)

ℹ hmr update /app.vue, /node_modules/tailwindcss/tailwind.css, /node_modules/tailwindcss/tailwind.css?direct (x6)                                                                                12.26.10
ℹ hmr update /app.vue, /node_modules/tailwindcss/tailwind.css, /node_modules/tailwindcss/tailwind.css?direct (x7)                                                                                12.26.13
2

Hi Hasan,

There are some HMR issues that the Nuxt team are still fixing with Nuxt CLI. Please refer to Daniel Roe’s response here - ERROR [unhandledRejection] read ECONNRESET · Issue #23832 · nuxt/nuxt · GitHub.

Meanwhile can you pin nuxi in your package.json like below, run npm install, re-open the project in Vue Designer, and try again. Let me know how you go!


  "pnpm": {
    "overrides": {
      "nuxi": "3.8.4"
    }
  },
  "overrides": {
    "nuxi": "3.8.4"
  },
3

If you still have this issue, please share your tailwind config file. Thanks!

4

There no any code inside my tailwind config file

5

If you haven’t yet, please open the config panel (clicking the nuxt/vue icon in the toolbar.

Scroll down to the section that shows instructions about installing the pinegrow tailwindcss plugin and other info. This is a required step for tailwind.

6

Refer to the tailwind config file in our sample apps if you want to understand how it looks like - happy-paws-with-nuxt-tailwindcss/tailwind.config.ts at main · Pinegrow/happy-paws-with-nuxt-tailwindcss · GitHub.

7

i did but i got another error


'nuxt' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code 1
npm ERR! path D:\Data IT Development\Hasan (Frontend Programmer)\Data Hasan\WEB\garansi
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c nuxt prepare

npm ERR! A complete log of this run can be found in: C:\Users\PC IT-Server\AppData\Local\npm-cache\_logs\2024-06-24T06_52_17_417Z-debug-0.log
8

Please try deleting you node_modules folder, and package-lock.json file, and run npm run install again, and start your dev-server (npm run dev) and try again.

If you could push your project to github or give access to your github project (if private), then I can have a quick look.

9

ok is sucessful, but is still same, i need press ALT+S when i make changes, pls wait i will configure myproject for github

1 Like
11

sorry for waiting GitHub - BoneDeath/garansi

12

No worries. As per my original comment, pinning nuxi is required for now (I have added it below for you). So, replace your package.json with the below, npm install and try again.


{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@nuxtjs/tailwindcss": "^6.12.0",
    "nuxt": "^3.12.2",
    "vue": "^3.4.29",
    "vue-router": "^4.3.3"
  },
  "devDependencies": {
    "@pinegrow/nuxt-module": "^3.0.56",
    "@pinegrow/tailwindcss-plugin": "^3.0.20"
  },
  "pnpm": {
    "overrides": {
      "nuxi": "3.8.4"
    }
  },
  "overrides": {
    "nuxi": "3.8.4"
  }
}

I will clone you repo when Im back home and test it out :+1:t4:

13

Also, your tailwind.config.ts file shouldn’t be empty.

Add the below to it, and follow the config panel to complete the rest.

export default {
  darkMode: 'class',
  plugins: [
    require('@pinegrow/tailwindcss-plugin').default(),
  ],

  get content() {
    const _content = [
      '{.,app,*-layer}/components/**/*.{js,vue,ts}',
      '{.,app,*-layer}/layouts/**/*.vue',
      '{.,app,*-layer}/pages/**/*.vue',
      '{.,app,*-layer}/plugins/**/*.{js,ts}',
      '{.,app,*-layer}/app.vue',
      '{.,app,*-layer}/*.{mjs,js,ts}',
      '{.,*-layer}/nuxt.config.{js,ts}',
    ]
    return process.env.NODE_ENV === 'production'
      ? _content
      : [..._content, './_pginfo/**/*.{html,js}'] // used by Vue Desginer for live-designing during development
  },
}
1 Like
14

ok, I will wait for the result thankyou

15

Sure! Meanwhile try the above two files and share your experience from your end. The above two should ideally fix the HMR issue you were experiencing.

16

Yes the HMR issue was resolved

1 Like
17

Cool, glad it works fine now. It was just the wiring :slightly_smiling_face:

18

How update of this topic do you resolve the problem??

19

Hi Hasan,

You confirmed that the HMR issue was resolved and it worked fine at your end. Did you have any other issues, for eg, the need to use Alt+S for HMR updates to be applied on the page?

Our config panel detects packages and provides instructions to make sure the appropriate wiring is established to ensure the app integrates with our design panel via the @pinegrow/tailwindcss-plugin and additionally provide intellisense as well. Please refer to the numbered list in the highlighted section.

image
image1005×870 87.6 KB

I would like to understand where in the workflow you had issues following the config panel? Was it when you had to create a new tailwind.config.ts file? If you could provide more information, it would be helpful to understand the expected resolution. Thanks.

20

The HMR issue was resolved, but is still sometime to need press ALT+S after perform any changes

21

No im just joking its work perfect like a charm :slightly_smiling_face:

1 Like