Follow this installation guide to install and configure the @unocss/preset-rem-to-px package in Nuxt 3:
Step 1. Install @unocss/preset-rem-to-px
npm i -D @unocss/preset-rem-to-px
Step 2. Add the following references in the nuxt.config.ts file:
...
import presetUno from "@unocss/preset-uno";
import presetRemToPx from "@unocss/preset-rem-to-px";
import presetAttributify from "@unocss/preset-attributify";
import presetIcons from "@unocss/preset-icons";
...
Step 3. Add the unocss config in the nuxt.config.ts file this way:
export default defineNuxtConfig({
...
unocss: {
presets: [
presetUno(),
presetAttributify(),
presetIcons(),
presetRemToPx(),
],
shortcuts: [],
rules: [],
},
...
});
Look at the Nuxt 3 documentation to learn more.
Make sure to install the dependencies:
# yarn
yarn install
# npm
npm install
# pnpm
pnpm install
Start the development server on http://localhost:3000
npm run dev
Build the application for production:
npm run build
Locally preview production build:
npm run preview
Check out the deployment documentation for more information.