v-uixy 1.1.3 → 1.2.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.2.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/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/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",
 };