@quidgest/ui 0.0.9 → 0.1.0

package/README.md

@@ -17,23 +17,42 @@ pnpm add @quidgest/ui
 
 ## Usage
 
-Once installed, you can import and use components as follows:
+Start by installing the framework. We recommend placing this logic in a dedicated file, such as `src/plugins/quidgest-ui.ts`.
 
-```vue
+```ts
+// src/plugins/quidgest-ui.ts
+
+import { createFramework } from '@quidgest/ui'
+
+const framework = createFramework()
+
+export default framework
+```
+
+Then, use the plugin in `main.ts`, as follows:
+
+```ts
+// src/main.ts
+
+import { createApp } from 'vue'
+import App from './App.vue'
+
+import framework from './plugins/quidgest-ui'
+
+createApp(App).use(framework).mount('#app')
+```
+
+Once installed, the components become globally available and can be used like so:
+
+```ts
 <template>
-	<div>
-		<q-button>Click me</q-button>
-	</div>
+	<q-button @click="handleClick">Click me</q-button>
 </template>
 
-<script>
-	import { QButton } from '@quidgest/ui'
-
-	export default {
-		components: {
-			QButton
-		}
-	}
+<script setup lang="ts">
+function handleClick() {
+	console.log("Parallel lines have so much in common. It's a shame they'll never meet.")
+}
 </script>
 ```
 
@@ -41,13 +60,7 @@ Once installed, you can import and use components as follows:
 
 The package utilizes Storybook for component development and organization. You can view the components locally in the Storybook documentation explorer.
 
-First, navigate to the package's directory:
-
-```cli
-cd ui
-```
-
-Next, run Storybook:
+Execute the following command to run Storybook:
 
 ```cli
 npm run storybook