About Nuxt DevTools Width Display

[CharleeWa]

• Description

When using the maxDisplayWidth property in our plugin, it seems to disrupt the width display in Nuxt DevTools.

• Steps to Reproduce

1. Add the plugin to a Nuxt project.
2. Set maxDisplayWidth.
3. Observe width display in Nuxt DevTools.

• Expected Behavior

The maxDisplayWidth property should not affect the display width of Nuxt DevTools.

• Demo

https://github.com/CharleeWa/nxm

[wswmsword]

You can avoid disrupting width of DevTools by adding exclude option:

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    '@vant/nuxt',
    'nuxt-module-eslint-config',
  ],

  typescript: {
    shim: false,
  },

  postcss: {
    plugins: {
      // https://github.com/wswmsword/postcss-mobile-forever
      'autoprefixer': {},
      'postcss-mobile-forever': {
        appSelector: '#app',
        viewportWidth: 375,
        maxDisplayWidth: 600,
+       exclude: /node_modules/,
      },
    },
  },
})

[CharleeWa]

Hi @wswmsword ! After using the "exclude" property, it's working fine now. However, when I dynamically import Vant components later on, it seems to have a side effect: Vant components no longer apply the vw/vh unit. I believe this is related to the exclude property. You can find more information from this repo. Thank you. 😊

[wswmsword]

Hi, you can specify the ignored conversion devtools style exactly like this:

exclude: /@nuxt/,

Or you can specify exactly this to only convert vant styles in node_modules:

exclude: /node_modules[/\\](?!vant)/,

The former is clearer and easier to understand, while the latter performs better because it ignores the conversion of all folders except Vant in node_module。

[CharleeWa]

Big thanks, but it seems the latter didn't work.