This is a Vite-based plugin used to convert inline and css file px units to vw units.

pnpm add @mistjs/vite-plugin-px2viewport

In vite.config.ts:

import { defineConfig } from 'vite'
import {px2viewport} from '@mistjs/vite-plugin-px2viewport'

export default defineConfig({
    plugins: [
        px2viewport({
            viewportWidth: 750
        })
    ],
})

• viewportWidth (number): The width of the viewport. Default: 750.
• include (string | RegExp | (string | RegExp)[]): The file path to be processed. Default: /\.(vue|jsx|tsx)$/.
• unitToConvert (string): The unit to convert. Default: px.
• unitPrecision (number): The decimal numbers to allow. Default: 5.
• viewportUnit (string): The unit to convert to. Default: vw.
• minPixelValue (number): The minimum pixel value to convert.
• cssOptions (object): same to postcss-px-to-viewport-8-plugin

Input

<template>
    <div style="width: 100px;height: 100px;"></div>
</template>

Output

<template>
    <div style="width: 13.33334vw;height: 13.33334vw;"></div>
</template>

Input

<template>
    <div :style="{width: '100px', height: '100px'}"></div>
</template>

Output

<template>
    <div :style="{width: '13.33334vw', height: '13.33334vw'}"></div>
</template>

Input

<script lang="ts" setup>
  import { computed } from "vue"
  const styles = computed(()=>{
    return {
      width: '100px',
      height: '100px'
    }
  })
</script>
<template>
    <div style="font-size: 18px" :style="styles"></div>
</template>

Runtime compiled code auto resolve px to vw