vite-plugin-flexible-mobile-forever

a vite plugin for inline mobile forever flexible of rem root

• devices css width references: https://viewportsizer.com/devices/
• flexible references: https://github.com/amfe/lib-flexible

Install

npm i vite-plugin-flexible-mobile-forever

// vite.config.ts
import AmfeMobileForever from 'vite-plugin-flexible-mobile-forever/vite'
export default defineConfig({
  plugins: [
    AmfeMobileForever({ /* options */ }),
  ],
})

Example: playground/

// rollup.config.js
import AmfeMobileForever from 'vite-plugin-flexible-mobile-forever/rollup'
export default {
  plugins: [
    AmfeMobileForever({ /* options */ }),
  ],
}

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('vite-plugin-flexible-mobile-forever/webpack')({ /* options */ })
  ]
}

// nuxt.config.js
export default defineNuxtConfig({
  modules: [
    ['vite-plugin-flexible-mobile-forever/nuxt', { /* options */ }],
  ],
})

This module works for both Nuxt 2 and Nuxt Vite

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('vite-plugin-flexible-mobile-forever/webpack')({ /* options */ }),
    ],
  },
}

// esbuild.config.js
import { build } from 'esbuild'
import AmfeMobileForever from 'vite-plugin-flexible-mobile-forever/esbuild'
build({
  plugins: [AmfeMobileForever()],
})

Configuration

The Options object contains the following properties:

maxDisplayWidth(number)

rootValue(number)

Example

const configurationOptions = {
  maxDisplayWidth: 420, // Specify the max display width
  rooValue: 37.5, // Specify the root font size, usually depends on the design system of UI
};