@dascompany/ui-layer-npm 1.0.0

package/README.md

@@ -0,0 +1,29 @@
+# app-npm
+
+Aplikacja Nuxt 4 używająca `@demo/ui-layer` zainstalowanego przez **npm**.
+
+## Uruchomienie
+
+```bash
+npm install
+npm run dev
+```
+
+Aplikacja dostępna pod http://localhost:3000
+
+## Jak to działa
+
+Layer `@demo/ui-layer` jest zainstalowany jak zwykła paczka npm.  
+`nuxt.config.ts` rozszerza layer przez `extends: ['@demo/ui-layer']`.  
+Vuetify i plugin `vite-plugin-vuetify` są zadeklarowane w `dependencies` tej aplikacji
+(wymagane przez npm jako peer dependencies layera).
+
+Komponent `<DemoCard>` jest dostępny globalnie bez żadnych ręcznych importów.
+
+## Różnica względem app-gitea
+
+Jedyną różnicą jest sposób instalacji layera:
+
+| app-npm | app-gitea |
+|---------|-----------|
+| `"@demo/ui-layer": "^1.0.0"` | `"@demo/ui-layer": "git+https://gitea.example.com/demo/ui-layer.git#v1.0.0"` |

package/app/components/DemoCardNpm.vue

@@ -0,0 +1,22 @@
+<template>
+  <v-card class="mx-auto" max-width="400" elevation="4" color="blue-lighten-5">
+    <v-card-title>{{ title }}</v-card-title>
+    <v-card-text>{{ description }}</v-card-text>
+    <v-card-actions>
+      <v-btn color="blue-darken-2" variant="elevated" @click="$emit('click')">
+        Kliknij (npm)
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  title?: string
+  description?: string
+}>()
+
+defineEmits<{
+  click: []
+}>()
+</script>

package/app/plugins/vuetify.ts

@@ -0,0 +1,19 @@
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+import 'vuetify/styles'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  // Guard against double-registration when multiple layers include this plugin
+  if (nuxtApp.vueApp.config.globalProperties.$vuetify) return
+
+  const vuetify = createVuetify({
+    components,
+    directives,
+    theme: {
+      defaultTheme: 'light'
+    }
+  })
+
+  nuxtApp.vueApp.use(vuetify)
+})

package/nuxt.config.ts

@@ -0,0 +1,22 @@
+import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
+
+export default defineNuxtConfig({
+  compatibility: {
+    nuxt: '>=4.0.0'
+  },
+
+  build: {
+    transpile: ['vuetify']
+  },
+
+  vite: {
+    vue: {
+      template: {
+        transformAssetUrls
+      }
+    },
+    plugins: [
+      vuetify({ autoImport: true })
+    ]
+  }
+})

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@dascompany/ui-layer-npm",
+  "version": "1.0.0",
+  "description": "Nuxt 4 layer with Vuetify 3 — distributed via npm",
+  "main": "./nuxt.config.ts",
+  "files": [
+    "app",
+    "nuxt.config.ts"
+  ],
+  "scripts": {
+    "dev": "nuxt dev"
+  },
+  "peerDependencies": {
+    "nuxt": "^4.0.0",
+    "vuetify": "^3.0.0",
+    "vite-plugin-vuetify": "^2.0.0"
+  },
+  "devDependencies": {
+    "nuxt": "^4.0.0",
+    "vuetify": "^3.8.0",
+    "vite-plugin-vuetify": "^2.0.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}