Linting works. UnoCSS works.

Author: ackzell

eslint.config.ts

@@ -47,5 +47,24 @@ export default antfu({
     'vue/custom-event-name-casing': ['error', 'kebab-case'],
     'node/prefer-global/process': ['warn'],
     'no-console': ['warn'],
+
+    'perfectionist/sort-imports': [
+      'error',
+      {
+        type: 'line-length',
+        order: 'desc',
+        groups: [
+          'side-effect', // CSS imports first
+          'builtin',
+          'external',
+          'internal-type',
+          'internal',
+          ['parent-type', 'sibling-type', 'index-type'],
+          ['parent', 'sibling', 'index'],
+          'object',
+          'unknown',
+        ],
+      },
+    ],
   },
 });

package.json

@@ -24,6 +24,7 @@
   "dependencies": {
     "@vue/repl": "^4.6.3",
     "@vueuse/core": "^13.6.0",
+    "unocss": "^66.4.2",
     "vue": "^3.5.18"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -3,5 +3,5 @@
 </script>
 
 <template>
-  <h1>hello world </h1>
+  <h1>Hola Mundo! </h1>
 </template>

public/lessonFile.vue

@@ -1,7 +1,7 @@
-import fs from 'node:fs';
+import { fileURLToPath } from 'node:url';
 import http from 'node:http';
 import path from 'node:path';
-import { fileURLToPath } from 'node:url';
+import fs from 'node:fs';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);

server.js

@@ -1,12 +1,13 @@
 import { onMounted, ref } from 'vue'
 <script setup lang="ts">
-import { Repl, useStore } from '@vue/repl';
+import '@vue/repl/style.css';
+
 import Monaco from '@vue/repl/monaco-editor';
+import { Repl, useStore } from '@vue/repl';
 import { useStorage } from '@vueuse/core';
-
 import { onMounted, ref } from 'vue';
+
 import ReplHeader from './ReplHeader.vue';
-import '@vue/repl/style.css';
 
 const preferDark = useStorage('vue-sfc-playground-prefer-dark', true);
 
@@ -52,7 +53,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="repl-container">
+  <div class="repl-container font-sans text-primary">
     <div
       v-if="errormessage"
       class="error"

src/App.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onMounted } from 'vue';
+
 import Moon from '@/icons/MoonIcon.vue';
 import Sun from '@/icons/SunIcon.vue';
 
@@ -26,7 +27,7 @@ onMounted(() => {
     <h1>
       <!-- TODO: maybe a logo would be cool -->
       <!-- <img alt="logo" src="/logo.svg" /> -->
-      <span>Vue live playground</span>
+      <span>yehyecoa-vue</span>
     </h1>
     <div class="links">
       <button

src/ReplHeader.vue

@@ -1,4 +1,7 @@
+import 'virtual:uno.css';
+
 import { createApp } from 'vue';
+
 import App from './App.vue';
 
 createApp(App).mount('#app');

src/main.ts

@@ -0,0 +1,21 @@
+import { defineConfig, presetAttributify, presetTagify, presetTypography, presetWebFonts, presetWind4 } from 'unocss';
+
+export default defineConfig({
+  presets: [
+    presetAttributify({
+      prefix: 'uno-',
+    }),
+    presetWind4(),
+    presetTypography(),
+    presetWebFonts(),
+    presetTagify(),
+  ],
+  theme: {
+    fontFamily: {
+      sans: 'Roboto, sans-serif',
+    },
+    colors: {
+
+    },
+  },
+});

uno.config.ts

@@ -1,14 +1,16 @@
 import { fileURLToPath, URL } from 'node:url';
 
+import vueDevTools from 'vite-plugin-vue-devtools';
 import vue from '@vitejs/plugin-vue';
 import { defineConfig } from 'vite';
-import vueDevTools from 'vite-plugin-vue-devtools';
+import UnoCSS from 'unocss/vite';
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
     vueDevTools(),
+    UnoCSS(),
   ],
   resolve: {
     alias: {