Repo Init

.gitignore

@@ -0,0 +1,9 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env
+dist
+.DS_Store

.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+	"workbench.colorCustomizations": {
+		"activityBar.background": "#103236",
+		"titleBar.activeBackground": "#17464C",
+		"titleBar.activeForeground": "#F5FBFC"
+	},
+	"cSpell.words": ["attributify", "iconsets", "materialdesignicons", "unocss"]
+}

README.md

@@ -0,0 +1,84 @@
+## Installation guide for the @unocss/preset-rem-to-px package in Nuxt 3
+
+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
+
+```bash
+npm i -D @unocss/preset-rem-to-px
+```
+
+Step 2. Add the following references in the _**nuxt.config.ts**_ file:
+
+```ts
+...
+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:
+
+```ts
+export default defineNuxtConfig({
+	...
+	unocss: {
+		presets: [
+			presetUno(),
+			presetAttributify(),
+			presetIcons(),
+			presetRemToPx(),
+		],
+		shortcuts: [],
+		rules: [],
+	},
+    ...
+});
+```
+
+---
+
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# yarn
+yarn install
+
+# npm
+npm install
+
+# pnpm
+pnpm install
+```
+
+## Development Server
+
+Start the development server on http://localhost:3000
+
+```bash
+npm run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+npm run build
+```
+
+Locally preview production build:
+
+```bash
+npm run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app.vue

@@ -0,0 +1,11 @@
+<!-- <template>
+	<div>
+		<NuxtWelcome />
+	</div>
+</template> -->
+
+<template>
+	<NuxtLayout>
+		<NuxtPage></NuxtPage>
+	</NuxtLayout>
+</template>

assets/sass/settings.scss

@@ -0,0 +1,12 @@
+.custom-text-color-red {
+	color: red;
+}
+
+.custom-text-color-blue {
+	color: blue;
+}
+
+// @forward "vuetify/settings" with (
+// 	// $button-color: green,
+// 	$button-font-weight: $button-font-weight
+// );

jsconfig.json

@@ -0,0 +1,5 @@
+{
+	"compilerOptions": {
+		"allowJs": true
+	}
+}

layouts/custom.vue

@@ -0,0 +1,28 @@
+<template>
+	<v-app id="inspire">
+		<v-navigation-drawer v-model="drawer">
+			<span class="custom-text-color-blue">hello world from Custom Layout</span>
+			<v-divider></v-divider>
+			<span class="custom-text-color-blue">Just a Text</span>
+			<v-divider></v-divider>
+			<NuxtLink to="/">home</NuxtLink>
+		</v-navigation-drawer>
+
+		<v-app-bar>
+			<v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
+
+			<v-toolbar-title>Application <span class="custom-text-color-red">Hello World Custom Layout Title</span></v-toolbar-title>
+		</v-app-bar>
+
+		<v-main>
+			<div class="custom-text-color-red">Hello World Custom Layout Main Section</div>
+			<slot></slot>
+		</v-main>
+	</v-app>
+</template>
+
+<script setup lang="ts">
+const drawer = ref<boolean>(false);
+
+const pp = ref<number>(0);
+</script>

layouts/default.vue

@@ -0,0 +1,29 @@
+<template>
+	<v-app id="inspire">
+		<v-navigation-drawer v-model="drawer">
+			<span class="custom-text-color-blue">hello world from Default Layout</span>
+			<v-divider></v-divider>
+			<span class="custom-text-color-blue">Just a Text</span>
+			<v-divider></v-divider>
+
+			<NuxtLink to="/about">About</NuxtLink>
+		</v-navigation-drawer>
+
+		<v-app-bar>
+			<v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
+
+			<v-toolbar-title>Application <span class="custom-text-color-red">Hello World Default Laytout Title</span></v-toolbar-title>
+		</v-app-bar>
+
+		<v-main>
+			<div class="pp">Hello World Default Layout Main Section</div>
+			<slot></slot>
+		</v-main>
+	</v-app>
+</template>
+
+<script setup lang="ts">
+const drawer = ref<boolean>(false);
+
+const pp = ref<number>(0);
+</script>

nuxt.config.ts

@@ -0,0 +1,32 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+
+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";
+
+export default defineNuxtConfig({
+	css: ["vuetify/lib/styles/main.sass", "@mdi/font/css/materialdesignicons.min.css", "assets/sass/settings.scss"],
+	modules: ["@nuxt/devtools", "@unocss/nuxt"],
+	build: {
+		transpile: ["vuetify"],
+	},
+	vite: {
+		define: {
+			"process.env.DEBUG": false,
+		},
+	},
+
+	unocss: {
+		presets: [
+			presetUno({
+				prefix: "unocss-",
+			}),
+			presetAttributify(),
+			presetIcons(),
+			presetRemToPx(),
+		],
+		shortcuts: [],
+		rules: [],
+	},
+});