Nuxt3如何获取页面的宽度？

Question

Nuxt3如何获取页面的宽度？

页面的布局依赖于页面宽度去布局，所以需要获取页面的宽度，但Nuxt3如何获取页面的宽度呢？

尝试过document.documentElement.clientWidth，但是服务端渲染的时候报错了

@zcf0508 以下内容展示的是server side，如何展示client side

最小问题复现放在github了，https://github.com/gongsikai1/nuxt3-demo

npm run build 然后再运行再访问3000端口是正常的，npm run dev访问3000端口只显示server side

<ClientOnly fallbackTag="span">
    <!-- this component will only be rendered on client side -->
      <p>client side</p>
      <template #fallback>
        <!-- this will be rendered on server side -->
        <p>server side</p>
      </template>
    </ClientOnly>
    <ClientOnly>
      789 {{ document }}
    </ClientOnly>

Answer 1

https://nuxt.com/docs/api/components/client-only

// package.json
  "dependencies": {
    "@element-plus/icons-vue": "^2.3.1",
    "@nuxtjs/i18n": "8.5.6",
    "add": "^2.0.6",
    "axios": "^1.8.4",
+   "dayjs": "^1.11.13",
    "element-plus": "^2.9.7",
    "moment": "^2.30.1",
    "nuxt": "3.15.4",
    "vue": "^3.5.13",
    "vue-i18n": "^11.1.3",
    "vue-router": "^4.5.0"
  },

element plus 依赖 dayjs ，缺少依赖。可以考虑使用 dayjs 替换 moment。