create-ui0 0.1.2 → 0.1.3

package/dist/index.js

@@ -8,12 +8,16 @@ import prompts from 'prompts';
  * Usage: npm create ui0 [dir]
  */
 const templateDir = fileURLToPath(new URL('../template', import.meta.url));
+const templateNuxtDir = fileURLToPath(new URL('../template-nuxt', import.meta.url));
 const componentTemplateDir = fileURLToPath(new URL('../template-component', import.meta.url));
 const toKebab = (s) => s
     .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
     .replace(/[\s_]+/g, '-')
     .toLowerCase();
-const toPascal = (s) => s.split(/[-\s_]+/).map((w) => w[0].toUpperCase() + w.slice(1)).join('');
+const toPascal = (s) => s
+    .split(/[-\s_]+/)
+    .map((w) => w[0].toUpperCase() + w.slice(1))
+    .join('');
 const toCamel = (s) => {
     const p = toPascal(s);
     return p[0].toLowerCase() + p.slice(1);
@@ -81,7 +85,12 @@ const runComponent = async () => {
         message: 'Target directory',
         initial: path.join('src', 'components', kebab)
     }, { onCancel });
-    const { spec } = await prompts({ type: 'confirm', name: 'spec', message: 'Include a vitest spec (adds vitest + @vue/test-utils to devDependencies)?', initial: false }, { onCancel });
+    const { spec } = await prompts({
+        type: 'confirm',
+        name: 'spec',
+        message: 'Include a vitest spec (adds vitest + @vue/test-utils to devDependencies)?',
+        initial: false
+    }, { onCancel });
     const dir = path.resolve(process.cwd(), target);
     if (existsSync(dir)) {
         console.error(`${target} already exists`);
@@ -125,42 +134,67 @@ const run = async () => {
     const target = path.resolve(process.cwd(), argDir ?? dir);
     const name = path.basename(target);
     if (existsSync(target)) {
-        const { overwrite } = await prompts({ type: 'confirm', name: 'overwrite', message: `${name} exists - continue and fill missing files?`, initial: false }, { onCancel });
+        const { overwrite } = await prompts({
+            type: 'confirm',
+            name: 'overwrite',
+            message: `${name} exists - continue and fill missing files?`,
+            initial: false
+        }, { onCancel });
         if (!overwrite)
             process.exit(0);
     }
+    const { host } = (await prompts({
+        type: 'select',
+        name: 'host',
+        message: 'App host',
+        choices: [
+            { title: 'Vite (SPA)', value: 'vite' },
+            { title: 'Nuxt (SSR, @ui0/nuxt)', value: 'nuxt' }
+        ],
+        initial: 0
+    }, { onCancel }));
     const { features } = (await prompts({
         type: 'multiselect',
         name: 'features',
-        message: 'Packages to include',
+        message: host === 'nuxt' ? 'Demo sections to include' : 'Packages to include',
         choices: FEATURES.map((f) => ({ title: f.title, value: f.id, selected: f.id !== 'icon' })),
         instructions: false
     }, { onCancel }));
+    // the nuxt flavour lives in its own template; @ui0/nuxt already carries
+    // every runtime package, so for nuxt the features only drive demo sections
+    const sourceDir = host === 'nuxt' ? templateNuxtDir : templateDir;
     mkdirSync(target, { recursive: true });
-    cpSync(templateDir, target, { recursive: true });
+    cpSync(sourceDir, target, { recursive: true });
     rmSync(path.join(target, 'package.json.tpl'));
     const picked = FEATURES.filter((f) => features.includes(f.id));
-    // package.json from the template manifest + chosen deps
-    const manifest = JSON.parse(readFileSync(path.join(templateDir, 'package.json.tpl'), 'utf8'));
+    // package.json from the template manifest + chosen deps (vite hosts only;
+    // the nuxt manifest already depends on @ui0/nuxt, which bundles the rest)
+    const manifest = JSON.parse(readFileSync(path.join(sourceDir, 'package.json.tpl'), 'utf8'));
     manifest.name = name;
-    Object.assign(manifest.dependencies, ...picked.map((f) => f.deps));
+    if (host !== 'nuxt')
+        Object.assign(manifest.dependencies, ...picked.map((f) => f.deps));
     writeFileSync(path.join(target, 'package.json'), JSON.stringify(manifest, null, 2) + '\n');
-    // App.vue: inject the demo sections of the picked features
-    const appVue = path.join(target, 'src/App.vue');
+    // app entry: src/App.vue (vite) or app/app.vue (nuxt) - inject the demo
+    // sections of the picked features; the nuxt module auto-registers the
+    // components, so no imports are added there
+    const appVue = path.join(target, host === 'nuxt' ? path.join('app', 'app.vue') : path.join('src', 'App.vue'));
     let app = readFileSync(appVue, 'utf8');
     app = app
-        .replace('/* FEATURE_IMPORTS */', picked.map((f) => f.importLine).join('\n'))
+        .replace('/* FEATURE_IMPORTS */', host === 'nuxt' ? '' : picked.map((f) => f.importLine).join('\n'))
         .replace('/* FEATURE_SECTIONS */', picked.map((f) => f.section).join('\n\n'));
     writeFileSync(appVue, app);
-    // the icon pack registers itself as a vue plugin
-    const mainTs = path.join(target, 'src/main.ts');
-    let main = readFileSync(mainTs, 'utf8');
-    if (features.includes('icon')) {
-        main = main
-            .replace("import { createUi0 } from '@ui0/core'", "import Icons from '@ui0/icons'\nimport { createUi0 } from '@ui0/core'")
-            .replace('app.use(ui0)', 'app.use(ui0)\napp.use(Icons)');
+    // the icon pack registers itself as a vue plugin (vite hosts only - the
+    // nuxt module wires the icon framework and the pack itself)
+    if (host !== 'nuxt') {
+        const mainTs = path.join(target, 'src', 'main.ts');
+        let main = readFileSync(mainTs, 'utf8');
+        if (features.includes('icon')) {
+            main = main
+                .replace("import { createUi0 } from '@ui0/core'", "import Icons from '@ui0/icons'\nimport { createUi0 } from '@ui0/core'")
+                .replace('app.use(ui0)', 'app.use(ui0)\napp.use(Icons)');
+        }
+        writeFileSync(mainTs, main);
     }
-    writeFileSync(mainTs, main);
     console.log(`\nScaffolded ${name}:\n`);
     console.log(`  cd ${path.relative(process.cwd(), target)}`);
     console.log('  npm install');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-ui0",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Scaffold a ui0 (Vue + @ui0) app - npm create ui0",
   "type": "module",
   "bin": {
@@ -9,6 +9,7 @@
   "files": [
     "dist",
     "template",
+    "template-nuxt",
     "template-component"
   ],
   "scripts": {

package/template-nuxt/app/app.vue

@@ -0,0 +1,37 @@
+<template>
+  <ThemeProvider preset="app">
+    <main :class="$style.page">
+      <h1>ui0 app</h1>
+
+/* FEATURE_SECTIONS */
+    </main>
+  </ThemeProvider>
+</template>
+
+<script setup lang="ts">
+  // ThemeProvider / Flex / Button / Icon are auto-registered by @ui0/nuxt
+</script>
+
+<style module lang="scss">
+  .page {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    padding: 32px;
+    font-family: system-ui, sans-serif;
+
+    h1 {
+      font-size: 20px;
+    }
+    h2 {
+      font-size: 14px;
+      opacity: 0.7;
+      margin-bottom: 8px;
+    }
+  }
+  .box {
+    padding: 12px 16px;
+    border: 1px solid rgba(127, 127, 127, 0.4);
+    border-radius: 6px;
+  }
+</style>

package/template-nuxt/nuxt.config.ts

@@ -0,0 +1,7 @@
+export default defineNuxtConfig({
+  ssr: true,
+  compatibilityDate: '2026-11-12',
+  devtools: { enabled: false },
+  // theme css pipeline, core+theme runtime and component auto-imports
+  modules: ['@ui0/nuxt']
+})

package/template-nuxt/package.json.tpl

@@ -0,0 +1,20 @@
+{
+  "name": "ui0-app",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "nuxt dev",
+    "build": "nuxt build",
+    "preview": "nuxt preview"
+  },
+  "dependencies": {
+    "@ui0/nuxt": "^0.1.0",
+    "nuxt": "^4.6.4",
+    "vue": "^3.5.45"
+  },
+  "devDependencies": {
+    "@ui0/types": "^0.1.2",
+    "sass-embedded": "^1.80.0"
+  }
+}

package/template-nuxt/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // generated by nuxt (prepare) - the project config extends it
+  "extends": "./.nuxt/tsconfig.json"
+}

package/template-nuxt/ui0.config.ts

@@ -0,0 +1,23 @@
+import type { Ui0CoreConfig } from '@ui0/types'
+
+const config: Ui0CoreConfig = {
+  theme: {
+    default: 'app',
+    contracts: {
+      display: {}
+    },
+    presets: {
+      app: {
+        default: {
+          color: {
+            brand: ['rgb(86 59 177)', 4],
+            foreground: '#111',
+            background: '#fff'
+          }
+        }
+      }
+    }
+  }
+}
+
+export default config