v-uixy 1.1.3 → 1.3.0

package/commands/add.js

@@ -10,12 +10,20 @@ const templatesRoot = path.resolve(
   "../templates"
 );
 
-const componentsDir = path.join(projectRoot, "components/ui");
-const composablesDir = path.join(projectRoot, "composables");
-const componentIndexPath = path.join(componentsDir, "index.ts");
-const composablesIndexPath = path.join(composablesDir, "index.ts");
 const registryPath = path.join(templatesRoot, "components.json");
 
+async function getProjectPaths() {
+  const componentsDir = path.join(projectRoot, "app/components/ui");
+  const composablesDir = path.join(projectRoot, "app/composables");
+
+  return {
+    componentsDir,
+    composablesDir,
+    componentIndexPath: path.join(componentsDir, "index.ts"),
+    composablesIndexPath: path.join(composablesDir, "index.ts"),
+  };
+}
+
 async function loadRegistry() {
   const exists = await fs.pathExists(registryPath);
   if (!exists) {
@@ -52,19 +60,21 @@ async function resolveDeps(name, registry, resolved = new Set()) {
 
 async function copyComponent(name) {
   const src = path.join(templatesRoot, `components/${name}`);
+  const { componentsDir } = await getProjectPaths();
   const dest = path.join(componentsDir, name);
 
   if (!(await fs.pathExists(src))) {
     console.log(chalk.yellow(`⚠️  No template found for component "${name}"`));
     return;
   }
-
+  await fs.ensureDir(componentsDir);
   await fs.copy(src, dest, { overwrite: true });
-  console.log(chalk.green(`✔ Copied ${name} to components/ui/${name}`));
+  console.log(chalk.green(`✔ Copied ${name} to app/components/ui/${name}`));
 }
 
 async function copyComposable(name) {
   const src = path.join(templatesRoot, `composables/${name}.ts`);
+  const { composablesDir } = await getProjectPaths();
   const dest = path.join(composablesDir, `${name}.ts`);
 
   if (!(await fs.pathExists(src))) {
@@ -80,6 +90,7 @@ async function copyComposable(name) {
 }
 
 async function getExistingIndexComponents() {
+  const { componentIndexPath } = await getProjectPaths();
   if (!(await fs.pathExists(componentIndexPath))) return [];
 
   const content = await fs.readFile(componentIndexPath, "utf8");
@@ -92,6 +103,8 @@ async function getExistingIndexComponents() {
 }
 
 async function updateIndex(newComponents) {
+  const { componentIndexPath, componentsDir } = await getProjectPaths();
+  await fs.ensureDir(componentsDir);
   await fs.ensureFile(componentIndexPath);
 
   const existing = await getExistingIndexComponents();
@@ -107,18 +120,20 @@ async function updateIndex(newComponents) {
 
   const lines = merged.map((name) => `export * from "./${name}";`);
   await fs.writeFile(componentIndexPath, lines.join("\n") + "\n");
-  console.log(chalk.green(`🔗 Updated components/ui/index.ts`));
+  console.log(chalk.green(`🔗 Updated app/components/ui/index.ts`));
 }
 
 async function updateComposablesIndex(name) {
+  const { composablesIndexPath, composablesDir } = await getProjectPaths();
   const line = `export * from "./${name}";`;
+  await fs.ensureDir(composablesDir);
   await fs.ensureFile(composablesIndexPath);
   const content = await fs.readFile(composablesIndexPath, "utf8");
   const lines = content.split("\n").map((line) => line.trim());
 
   if (!lines.includes(line)) {
     await fs.appendFile(composablesIndexPath, line + "\n");
-    console.log(`🔗 Linked composable "${name}" in composables/index.ts`);
+    console.log(`🔗 Linked composable "${name}" in app/composables/index.ts`);
   } else {
     console.log(`ℹ️  Composable "${name}" already linked`);
   }
@@ -162,10 +177,48 @@ async function installPackages(componentNames, registry) {
   }
 }
 
+async function ensureTypeScriptInstalled() {
+  const packageJsonPath = path.join(projectRoot, "package.json");
+  if (!(await fs.pathExists(packageJsonPath))) return;
+
+  const packageJson = await fs.readJson(packageJsonPath);
+  const hasTS = Boolean(
+    packageJson.dependencies?.typescript ||
+      packageJson.devDependencies?.typescript
+  );
+  if (hasTS) return;
+
+  console.log(chalk.blue("📦 Installing dev dependency: typescript"));
+  try {
+    await execa("npm", ["install", "-D", "typescript"], { stdio: "inherit" });
+    console.log(chalk.green("✔ Installed typescript"));
+  } catch (err) {
+    console.error(chalk.red("✖ Failed to install typescript"));
+  }
+}
+
+async function ensureTsconfig() {
+  const tsconfigDest = path.join(projectRoot, "tsconfig.json");
+  if (await fs.pathExists(tsconfigDest)) return;
+
+  const tsconfigSrc = path.join(templatesRoot, "tsconfig.json");
+  if (!(await fs.pathExists(tsconfigSrc))) return;
+
+  try {
+    await fs.copy(tsconfigSrc, tsconfigDest);
+    console.log(chalk.green("✔ Added tsconfig.json"));
+  } catch (err) {
+    console.error(chalk.red("✖ Failed to add tsconfig.json"));
+  }
+}
+
 export default async function add(componentName) {
   const registry = await loadRegistry();
   let componentsToAdd = new Set();
 
+  await ensureTypeScriptInstalled();
+  await ensureTsconfig();
+
   if (componentName.toLowerCase() === "all") {
     componentsToAdd = new Set(registry.map((c) => c.name));
   } else {

package/commands/init.js

@@ -13,19 +13,22 @@ const root = process.cwd();
 const templateRoot = path.resolve(__dirname, "../templates");
 
 const filesToCopy = [
-  "components.json",
-  "scripts/generateIconTypes.script.js",
-  "assets/css/main.css",
-  "tailwind.config.ts",
-  "nuxt.config.ts",
-  "tsconfig.json",
-  "types/styles.d.ts",
-  "types/icons.ts",
-  "utils/styles.ts",
-  "utils/twMerge.ts",
+  { src: "components.json", dest: "components.json" },
+  {
+    src: "scripts/generateIconTypes.script.js",
+    dest: "scripts/generateIconTypes.script.js",
+  },
+  { src: "assets/css/main.css", dest: "app/assets/css/main.css" },
+  { src: "tailwind.config.ts", dest: "tailwind.config.ts" },
+  { src: "nuxt.config.ts", dest: "nuxt.config.ts" },
+  { src: "tsconfig.json", dest: "tsconfig.json" },
+  { src: "types/styles.d.ts", dest: "types/styles.d.ts" },
+  { src: "types/icons.ts", dest: "app/types/icons.ts" },
+  { src: "utils/styles.ts", dest: "app/utils/styles.ts" },
+  { src: "utils/twMerge.ts", dest: "app/utils/twMerge.ts" },
 ];
 
-const dirsToCopy = ["assets/icons"];
+const dirsToCopy = [{ src: "assets/icons", dest: "app/assets/icons" }];
 
 async function installPackages() {
   const packages = [
@@ -35,6 +38,7 @@ async function installPackages() {
     "vite-svg-loader",
     "tailwind-merge",
     "@tailwindcss/vite",
+    "typescript",
   ];
 
   console.log(chalk.blue("\n📦 Installing dependencies..."));
@@ -50,9 +54,9 @@ async function installPackages() {
 export default async function init(options = {}) {
   console.log(chalk.cyan("🧩 Initializing v-uixy..."));
 
-  for (const relPath of filesToCopy) {
-    const src = path.join(templateRoot, relPath);
-    const dest = path.join(root, relPath);
+  for (const { src: srcRel, dest: destRel } of filesToCopy) {
+    const src = path.join(templateRoot, srcRel);
+    const dest = path.join(root, destRel);
 
     const exists = await fs.pathExists(dest);
     if (exists) {
@@ -60,7 +64,7 @@ export default async function init(options = {}) {
         {
           type: "confirm",
           name: "overwrite",
-          message: `${chalk.yellow(relPath)} already exists. Overwrite?`,
+          message: `${chalk.yellow(destRel)} already exists. Overwrite?`,
           default: false,
         },
       ]);
@@ -73,12 +77,12 @@ export default async function init(options = {}) {
 
     await fs.ensureDir(path.dirname(dest));
     await fs.copy(src, dest);
-    console.log(chalk.green(`✔ Created ${relPath}`));
+    console.log(chalk.green(`✔ Created ${destRel}`));
   }
 
-  for (const relPath of dirsToCopy) {
-    const src = path.join(templateRoot, relPath);
-    const dest = path.join(root, relPath);
+  for (const { src: srcRel, dest: destRel } of dirsToCopy) {
+    const src = path.join(templateRoot, srcRel);
+    const dest = path.join(root, destRel);
 
     const exists = await fs.pathExists(dest);
     if (exists) {
@@ -87,7 +91,7 @@ export default async function init(options = {}) {
           type: "confirm",
           name: "overwrite",
           message: `${chalk.yellow(
-            relPath
+            destRel
           )} already exists. Overwrite entire directory?`,
           default: false,
         },
@@ -102,7 +106,7 @@ export default async function init(options = {}) {
     }
 
     await fs.copy(src, dest);
-    console.log(chalk.green(`✔ Copied directory ${relPath}`));
+    console.log(chalk.green(`✔ Copied directory ${destRel}`));
   }
 
   if (!options.withoutPackages) {

package/commands/list.js

@@ -4,11 +4,11 @@ import chalk from "chalk";
 import { fileURLToPath } from "url";
 
 const projectRoot = process.cwd();
-const componentsDir = path.join(projectRoot, "components/ui");
 const templatesRoot = path.resolve(
   path.dirname(fileURLToPath(import.meta.url)),
   "../templates"
 );
+const componentsDir = path.join(projectRoot, "app/components/ui");
 
 async function loadRegistry() {
   const registryPath = path.join(templatesRoot, "components.json");
@@ -28,8 +28,7 @@ async function listComponents() {
   const results = [];
 
   for (const { name } of registry) {
-    const componentPath = path.join(componentsDir, name);
-    const isInstalled = await fs.pathExists(componentPath);
+    const isInstalled = await fs.pathExists(path.join(componentsDir, name));
 
     results.push({
       name,

package/commands/remove.js

@@ -9,7 +9,7 @@ const templatesRoot = path.resolve(
   path.dirname(fileURLToPath(import.meta.url)),
   "../templates"
 );
-const componentsDir = path.join(projectRoot, "components/ui");
+const componentsDir = path.join(projectRoot, "app/components/ui");
 const componentIndexPath = path.join(componentsDir, "index.ts");
 
 async function loadRegistry() {
@@ -34,8 +34,15 @@ async function removeIndexExport(name) {
     .filter((l) => l.trim() !== line)
     .join("\n");
 
-  await fs.writeFile(componentIndexPath, newContent);
-  console.log(`🧹 Removed export from index.ts for "${name}"`);
+  if (newContent !== content) {
+    await fs.writeFile(componentIndexPath, newContent);
+    console.log(
+      `🧹 Removed export from ${path.relative(
+        projectRoot,
+        componentIndexPath
+      )} for "${name}"`
+    );
+  }
 }
 
 async function removeComponent(name) {
@@ -60,11 +67,11 @@ async function removeComponent(name) {
 
   await fs.remove(pathToRemove);
   await removeIndexExport(name);
-  console.log(chalk.green(`🗑️  Removed component "${name}"`));
+  console.log(
+    chalk.green(`🗑️  Removed component "${name}" from app/components/ui`)
+  );
 }
 
 export default async function remove(componentName) {
-  const registry = await loadRegistry();
-
   await removeComponent(componentName);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-uixy",
-  "version": "1.1.3",
+  "version": "1.3.0",
   "private": false,
   "author": {
     "name": "Alan Haber",

package/templates/components/Modal/Modal.component.vue

@@ -1,28 +1,30 @@
 <template>
-  <teleport to="body">
-    <animate-presence>
-      <motion.div
-        v-if="open"
-        :initial="{ opacity: 0 }"
-        :animate="{ opacity: 1 }"
-        :exit="{ opacity: 0 }"
-        :transition="{ duration: 0.15, ease: 'easeInOut' }"
-        :class="modalStyles($attrs.class as string)"
-        data-modal
-        @click.self="handleClick"
-        @keydown{esc}="handleClick"
-      >
+  <client-only>
+    <teleport to="body">
+      <animate-presence>
         <motion.div
-          :initial="{ scale: 0.8 }"
-          :animate="{ scale: 1 }"
-          :exit="{ scale: 0.8 }"
+          v-if="open"
+          :initial="{ opacity: 0 }"
+          :animate="{ opacity: 1 }"
+          :exit="{ opacity: 0 }"
           :transition="{ duration: 0.15, ease: 'easeInOut' }"
+          :class="modalStyles($attrs.class as string)"
+          data-modal
+          @click.self="handleClick"
+          @keydown{esc}="handleClick"
         >
-          <slot />
+          <motion.div
+            :initial="{ scale: 0.8 }"
+            :animate="{ scale: 1 }"
+            :exit="{ scale: 0.8 }"
+            :transition="{ duration: 0.15, ease: 'easeInOut' }"
+          >
+            <slot />
+          </motion.div>
         </motion.div>
-      </motion.div>
-    </animate-presence>
-  </teleport>
+      </animate-presence>
+    </teleport>
+  </client-only>
 </template>
 
 <script setup lang="ts">
@@ -43,10 +45,14 @@
   };
 
   const toggleSiblingsInert = (enable?: boolean) => {
-    Array.from(document.body.children).forEach((el) => {
-      if (el === document.querySelector("[data-modal]")) return;
+    if (typeof document === "undefined") return;
+
+    const modalEl = document.querySelector(
+      "[data-modal]"
+    ) as HTMLElement | null;
 
-      if (el.hasAttribute("data-modal")) return;
+    Array.from(document.body.children).forEach((el) => {
+      if (modalEl && (el === modalEl || el.contains(modalEl))) return;
 
       if (enable) {
         el.setAttribute("inert", "");

package/templates/components/PieChart/PieChart.component.vue

@@ -0,0 +1,218 @@
+<template>
+  <div ref="wrapperRef" class="relative w-full aspect-square">
+    <svg
+      ref="svgRef"
+      width="100%"
+      height="100%"
+      :viewBox="`0 0 ${size} ${size}`"
+      role="img"
+      aria-label="Pie chart"
+      class="block select-none pointer-events-none"
+    >
+      <motion.g
+        :initial="{ transform: `rotate(0, ${center}, ${center})` }"
+        :animate="{ transform: `rotate(0, ${center}, ${center})` }"
+        :transition="groupTransition"
+      >
+        <circle
+          :cx="center"
+          :cy="center"
+          :r="radius"
+          fill="none"
+          class="stroke-gray-300 dark:stroke-gray-800"
+          :stroke-width="thickness"
+          vector-effect="non-scaling-stroke"
+          shape-rendering="geometricPrecision"
+        />
+        <template v-if="isReady">
+          <motion.circle
+            v-for="seg in segmentsTimed"
+            :key="seg.key"
+            :initial="{
+              strokeDasharray: `0 ${circumference}`,
+              strokeDashoffset: seg.offset,
+              opacity: 0.8,
+            }"
+            :animate="{
+              strokeDasharray: `${seg.length} ${circumference}`,
+              strokeDashoffset: seg.offset,
+              opacity: 1,
+            }"
+            :transition="transitionFor(seg)"
+            :cx="center"
+            :cy="center"
+            :r="radius"
+            fill="none"
+            :stroke="seg.color"
+            :stroke-width="thickness - 2"
+            stroke-linecap="butt"
+            vector-effect="non-scaling-stroke"
+            shape-rendering="geometricPrecision"
+          />
+        </template>
+      </motion.g>
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed, onMounted, onUnmounted, ref, toRefs, watch } from "vue";
+  import { motion } from "motion-v";
+  import type { UixyPieChartProps } from "./PieChart.types";
+
+  type SegBase = { key: string; length: number; offset: number; color: string };
+  type SegTimed = SegBase & { dur: number; delay: number };
+
+  const INITIAL_TOTAL_DURATION = 1.2;
+  const UPDATE_DURATION = 0.45;
+  const OVERLAP = 0.02;
+  const SIZE_EPSILON = 0.5;
+  const EASING = "linear";
+
+  const props = withDefaults(defineProps<UixyPieChartProps>(), {
+    thickness: 18,
+    animate: true,
+  });
+
+  const wrapperRef = ref<HTMLElement | null>(null);
+  const svgRef = ref<SVGSVGElement | null>(null);
+  const measuredSize = ref<number>(180);
+  const roRef = ref<ResizeObserver | null>(null);
+  const isReady = ref(false);
+  const initialTimer = ref<ReturnType<typeof setTimeout> | null>(null);
+
+  const size = computed(() => measuredSize.value);
+  const center = computed(() => measuredSize.value / 2);
+  const radius = computed(() =>
+    Math.max(1, measuredSize.value / 2 - props.thickness / 2 - 2)
+  );
+
+  const circumference = computed(() => 2 * Math.PI * radius.value);
+
+  const groupTransition = computed(() =>
+    !isReady.value || isInitial.value
+      ? { duration: 0 }
+      : { duration: 0.35, easing: EASING }
+  );
+
+  const total = computed(() =>
+    props.data.reduce((acc, d) => acc + Math.max(0, d.value), 0)
+  );
+
+  const segmentsBase = computed<SegBase[]>(() => {
+    const totalVal = total.value || 1;
+    let acc = 0;
+    const list: SegBase[] = [];
+
+    props.data.forEach((d, i) => {
+      const frac = Math.max(0, d.value) / totalVal;
+      const baseLen = frac * circumference.value;
+      const drawLen = Math.max(0, baseLen);
+
+      if (drawLen > 0) {
+        list.push({
+          key: `seg-${i}-${d.color ?? "c"}`,
+          length: drawLen,
+          offset: -acc,
+          color: d.color || "#999999",
+        });
+      }
+
+      acc += baseLen;
+    });
+
+    return list;
+  });
+
+  const segmentsTimed = computed<SegTimed[]>(() => {
+    const totalDur = Math.max(0.01, INITIAL_TOTAL_DURATION);
+    let running = 0;
+
+    return segmentsBase.value.map((s) => {
+      const dur = (s.length / Math.max(1e-6, circumference.value)) * totalDur;
+      const delay = Math.max(0, running - OVERLAP);
+      const segT: SegTimed = { ...s, dur, delay };
+      running += dur;
+      return segT;
+    });
+  });
+
+  const isInitial = ref(true);
+
+  watch(
+    () => ({ ready: isReady.value }),
+    ({ ready }) => {
+      if (!ready) return;
+
+      if (initialTimer.value) return;
+
+      const totalDur = INITIAL_TOTAL_DURATION;
+
+      initialTimer.value = setTimeout(() => {
+        isInitial.value = false;
+        if (initialTimer.value) {
+          clearTimeout(initialTimer.value);
+          initialTimer.value = null;
+        }
+      }, Math.ceil(totalDur * 1000) + 16);
+    },
+    { immediate: true }
+  );
+
+  onMounted(() => {
+    startResizeObserver();
+  });
+
+  onUnmounted(() => {
+    stopResizeObserver();
+
+    if (initialTimer.value) {
+      clearTimeout(initialTimer.value);
+      initialTimer.value = null;
+    }
+  });
+
+  const transitionFor = (seg: SegTimed) => {
+    if (isInitial.value)
+      return { delay: seg.delay, duration: seg.dur, easing: EASING } as const;
+
+    return { delay: 0, duration: UPDATE_DURATION, easing: EASING };
+  };
+
+  const measure = () => {
+    const el = wrapperRef.value ?? svgRef.value;
+
+    if (!el) return;
+
+    const rect = el.getBoundingClientRect();
+    const next = Math.max(1, Math.min(rect.width || 0, rect.height || 0));
+
+    if (Math.abs(next - measuredSize.value) > SIZE_EPSILON)
+      measuredSize.value = next;
+
+    if (!isReady.value && next > 1) isReady.value = true;
+  };
+
+  const startResizeObserver = () => {
+    if (roRef.value) return;
+
+    roRef.value = new ResizeObserver(measure);
+
+    const el = wrapperRef.value ?? svgRef.value;
+
+    if (el) roRef.value.observe(el);
+
+    requestAnimationFrame(measure);
+  };
+
+  const stopResizeObserver = () => {
+    if (!roRef.value) return;
+
+    const el = wrapperRef.value ?? svgRef.value;
+
+    if (el) roRef.value.unobserve(el);
+
+    roRef.value.disconnect();
+    roRef.value = null;
+  };
+</script>

package/templates/components/PieChart/PieChart.types.ts

@@ -0,0 +1,10 @@
+export type UixyPieChartData = {
+  label: string;
+  value: number;
+  color: string;
+};
+
+export interface UixyPieChartProps {
+  data: UixyPieChartData[];
+  thickness?: number;
+}

package/templates/components/PieChart/index.ts

@@ -0,0 +1,4 @@
+import UixyPieChart from "./PieChart.component.vue";
+import type { UixyPieChartProps, UixyPieChartData } from "./PieChart.types";
+
+export { UixyPieChart, type UixyPieChartData, type UixyPieChartProps };

package/templates/components/Sheet/Sheet.component.vue

@@ -1,31 +1,33 @@
 <template>
-  <teleport to="body">
-    <animate-presence>
-      <template v-if="open">
-        <motion.div
-          :initial="{ opacity: 0 }"
-          :animate="{ opacity: 1 }"
-          :exit="{ opacity: 0 }"
-          :transition="{ ease: 'easeInOut', duration: 0.15 }"
-          @click.self="handleClick"
-          class="fixed left-0 top-0 z-20 size-full bg-white/5 backdrop-blur-[2px] dark:bg-gray-900/5"
-        />
-        <motion.div
-          initial="initial"
-          animate="animate"
-          exit="exit"
-          :variants="ANIMATIONS[props.direction ?? 'right']"
-          :transition="{ ease: 'easeInOut', duration: 0.3 }"
-          :class="
+  <client-only>
+    <teleport to="body">
+      <animate-presence>
+        <template v-if="open">
+          <motion.div
+            :initial="{ opacity: 0 }"
+            :animate="{ opacity: 1 }"
+            :exit="{ opacity: 0 }"
+            :transition="{ ease: 'easeInOut', duration: 0.15 }"
+            @click.self="handleClick"
+            class="fixed left-0 top-0 z-20 size-full bg-white/5 backdrop-blur-[2px] dark:bg-gray-900/5"
+          />
+          <motion.div
+            initial="initial"
+            animate="animate"
+            exit="exit"
+            :variants="ANIMATIONS[props.direction ?? 'right']"
+            :transition="{ ease: 'easeInOut', duration: 0.3 }"
+            :class="
             sheetStyles({ direction: props.direction ?? 'right' }, $attrs.class as string)
           "
-          v-bind="filteredAttrs"
-        >
-          <slot />
-        </motion.div>
-      </template>
-    </animate-presence>
-  </teleport>
+            v-bind="filteredAttrs"
+          >
+            <slot />
+          </motion.div>
+        </template>
+      </animate-presence>
+    </teleport>
+  </client-only>
 </template>
 
 <script setup lang="ts">

package/templates/components.json

@@ -96,6 +96,12 @@
       "packages": ["motion-v"],
       "composables": []
     },
+    {
+      "name": "PieChart",
+      "related-components": [],
+      "packages": ["motion-v"],
+      "composables": []
+    },
     {
       "name": "Popover",
       "related-components": [],

package/templates/nuxt.config.ts

@@ -1,16 +1,28 @@
 import svgLoader from "vite-svg-loader";
 import tailwindcss from "@tailwindcss/vite";
 import { fileURLToPath } from "url";
-import { dirname, join } from "path";
+import { dirname, resolve } from "path";
 
-const currentDir = dirname(fileURLToPath(import.meta.url));
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  compatibilityDate: "2025-04-24",
+  modules: ["motion-v/nuxt"],
+  compatibilityDate: "2025-10-15",
   devtools: { enabled: true },
-  css: [join(currentDir, "./assets/css/main.css")],
+  css: ["~/assets/css/main.css"],
   vite: {
     plugins: [svgLoader(), tailwindcss()],
+    resolve: {
+      alias: {
+        "~/utils": resolve(__dirname, "app/utils"),
+        "@/utils": resolve(__dirname, "app/utils"),
+        "~/assets": resolve(__dirname, "app/assets"),
+        "@/assets": resolve(__dirname, "app/assets"),
+        "~/types": resolve(__dirname, "app/types"),
+        "@/types": resolve(__dirname, "app/types"),
+      },
+    },
   },
 });

package/templates/scripts/generateIconTypes.script.js

@@ -5,8 +5,8 @@ import { fileURLToPath } from "url";
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
-const svgDir = path.join(__dirname, "../assets/icons");
-const outputFile = path.join(__dirname, "../types/icons.ts");
+const svgDir = path.join(__dirname, "../app/assets/icons");
+const outputFile = path.join(__dirname, "../app/types/icons.ts");
 
 function formatKey(name) {
   return name

package/templates/tailwind.config.ts

@@ -1,12 +1,5 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
-    "./components/**/*.{js,vue,ts}",
-    "./layouts/**/*.vue",
-    "./pages/**/*.vue",
-    "./plugins/**/*.{js,ts}",
-    "./app.vue",
-    "./error.vue",
-  ],
+  content: ["./app/**/*.{js,ts,vue}", "./error.vue"],
   darkMode: "class",
 };